Hi Ian,
If I could make a suggestion. Build it as a link/button from a form first, that way you can deal with the google mapping stuff first, and learn how that works, before you deal with doing it via ajax.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps API Example: Simple Geocoding</title>
<script src="//maps.google.com/maps?file=api&v=2.x&key=[GOOGLE.MAPS:KEY]" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
showAddress('199 Pacific Highway, North Sydney, NSW, Australia');
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
// marker.openInfoWindow(document.createTextNode(address));
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
There is a self contained HTML document that just draws a map in a window. Its quick and rough (because i'm lazying and doing other stuff).
Google have changed some of the API recently but this code still works. These examples are in API V2, they also have API V3, which i haven't bothered with yet.
Replace [GOOGLE.MAPS:KEY] with a map key you get from google You need a map key for API V2. Nowadays even this is tricky, Go to
https://developers.google.com/ and then click on API Console and try and find your way to register a map V2 api key! This is probably the hardest bit
.
If you can chop this up and get the script onto a NT page and place the "map_canvas" div onto a page (using the XHTML tab). It will work.
Oh, and of course replace my address "199 Pacific ... etc" with the address in question.
Regards
Bill
Topic: Popup Google Map (Read 5575 times)