Loading InfoWindow Content using AJAX with Google Maps API

October 5th, 2012 - Posted by Steve Marks to Javascript / jQuery, Web Development.

One of the things I love about the Google Maps API is it’s speed, both from a development point of view and usability. I got asked a question the other day however regarding loading hundreds, if not thousands, of markers, each with an InfoWindow containing an image.

The page loading time was taking a while so we looked at getting the InfoWindow content using AJAX. This would mean the image and additional text was obtained upon request, only when required. There was also a high probability that only a couple of the markers would be clicked so it seemed silly to load every single one in the slight eventuality that it be viewed.

Below I’ve included a very simple map with one marker and an InfoWindow where no AJAX is used:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	
	var map; // Global declaration of the map
	var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow

	function initialize() 
	{
		var myOptions = {
	  		zoom: 13,
			center: new google.maps.LatLng(37.4419, -122.1419),
	  		mapTypeId: google.maps.MapTypeId.ROADMAP
	  	}
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		var markerOptions = {
			map: map,
			position: new google.maps.LatLng(37.429, -122.1419)		
		};
		marker = new google.maps.Marker(markerOptions);
		
		google.maps.event.addListener(marker, "click", function()
		{
			iw.setContent("This is an infowindow");
			iw.open(map, this);
		});
	}

</script>
<div id="map_canvas"></div>

This is the map in action:

Works fine right? Now let’s take this same map but load the InfoWindow using an AJAX request.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
	
	var map; // Global declaration of the map
	var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow

	function initialize() 
	{
		var myOptions = {
	  		zoom: 13,
			center: new google.maps.LatLng(37.4419, -122.1419),
	  		mapTypeId: google.maps.MapTypeId.ROADMAP
	  	}
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		var markerOptions = {
			map: map,
			position: new google.maps.LatLng(37.429, -122.1419)		
		};
		marker = new google.maps.Marker(markerOptions);
		
		google.maps.event.addListener(marker, "click", function()
		{
			// Make an AJAX request to get the data
			// The return will be put into the InfoWindow
			$.ajax({
  				url: 'ajax/get_infowindow_content.php',
  				success: function(data) {
    					iw.setContent(data);
					iw.open(map, marker);
  				}
			});
		});
	}

</script>
<div id="map_canvas"></div>

And again, the result:

From looking at the two maps you shouldn’t notice any difference. With one marker on a map the speed advantage will be miniscule. Produce a map with hundreds of markers and InfoWindows on however and the time saved will be a couple of seconds, if not more.

This entry was posted on Friday, October 5th, 2012 at 9:28 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (5)
  1. Gilberto Leon says:

    Thank you for this post,
    Is precisely what I was looking for and is well explained to the point.
    Regards

  2. CalmbursT says:

    Thank you very much!!! Very usefull! You made my day with this tutorial!!

  3. Carolina says:

    Thanks!

    Very good tutorial.

  4. Jaco says:

    Not often a tutorial addresses my exact need so succinctly.

    Thank you

  5. Fire says:

    Thanks for your tutorial. Saved me from a big headache.