Displaying

Lets get started with a simple map using Version 3 of the Google Maps API. Here is one straight from the documentation: example with marker

Dynamically Displaying

Now here is an example that is much more complex. Not only does it add infowindows, custom icons and events – it also pulls each point from a database! Note the ‘query_posts’, a wordpress function that finds the newest 50 posts with the custom post type of ‘map’:

Geocoding

Here is another snippet from 50th.pcc.edu. This time, we set up a ‘geocoder’ to get the location information that we need. This particular function waits for a change in the input with id=location. It first attempts to turn the text into latlng coordinates. It then reverse-geocodes those coordinates so that we show them that they got the correct city.

/* get location */
	geocoder = new google.maps.Geocoder();
	$("#location").change(function(){
		
		$("#location-text").html("Looking...").removeClass("found error");
	    var address = $(this).val();
		geocoder.geocode( { 'address': address}, function(results, status) { // get latlong
		  if (status == google.maps.GeocoderStatus.OK) {
			  
			  var latlng = results[0].geometry.location;
			  
			  geocoder.geocode({'latLng': latlng}, function(results, status) {	// get address from latlng
      			if (status == google.maps.GeocoderStatus.OK) {
					var result = results[0];
					var resultString = "";
					for(var i=0;i
Maintaining
Sometimes, it's easiest to just pull data from a Google Earth (.kml) file. Here is a simple example from the documentation: KML file, View on web
var myLatlng = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
  zoom: 11,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');
ctaLayer.setMap(map);