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>

Google Map API – Adding address markers and geocoding

I had a need to add a set of markers to a Google map using the Google Maps API that could be easily modified over time.  It is fairly easy to add markers with the Google Maps API but I wanted to put something together that will do the geocoding at the same time so I don’t have to manually add the lat / lng coordinates when I just want to add an address.  As a result I put together the following bit of script.  The addresses are loaded from an xml file named data.xml, geocoded and then added to the map.  If you are going to use this example for yourself, just add your Google Maps API key and enter the addresses you want to add. You can visit a LIVE SAMPLE or download the full html page and associated data.xml file from HERE.  [Read more...]