Simple Marker Based on Address using the Google API

If you need to show a marker on a map based on an user inputted address, the Google API provides you a way. You can use the code below to create your own map you just need to get a Google Maps API key from Google Maps and insert it in line 6. In line 30 you can add html markup to modify how the call out box appears and what it contains. Just expand the code box below to check it out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=YOUR GOOGLE MAPS API KEY FOR YOUR DOMAIN"
type="text/javascript"></script>
<script type="text/javascript">

var map;
var geocoder;

function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(27.174858, 78.042383), 12);
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
}

function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('The Place you entered: '+place.address + '<br>');
}
}

function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}

</script>

</head>

<body onload="initialize()">
<span class="style1">
<form action="#" onsubmit="showLocation(); return false;">
<p>
<b>Search for an address:</b>
<input type="text" name="q" value="" class="address_input" size="40" />
<input type="submit" name="find" value="Search" />
</p>
</form>
<div id="map_canvas" style="width: 500px; height: 500px"></div>
</span>
</body>
</html>

Comments

  1. Is there a simple way to make the markers persistent?

  2. Hello,

    Is it possible to integrate this for xforms?

    So that the client can enter the adress through xforms and the map is automatically generated in the resulting html?

    Thank you in advance!

    William.

Speak Your Mind

*