Learning to Love the API: Map Examples

Wednesday, October 6th, 2010


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

Google Maps JavaScript API v3 Example: Marker Simple


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’:


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-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


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');

2 Responses to “Learning to Love the API: Map Examples”

  1. gabriel nagmay (dot com) | Archive » Learning to Love the API Says:

    […] Maps […]

  2. gabriel nagmay (dot com) | Archive » ALL THE THINGS! Says:

    […] 50th.pcc.edu (Resurrected for your enjoyment) […]

Leave a Reply

You know you want to...