Adding Markers to a Map Using the Google Maps API and jQuery Article

Before we start writing code, it’s best to examine the format of the XML data we’ll be using to load our location data.

The coordinates and information for each marker we want to place on our map will be contained in an XML file. This makes it easy to change it, or have it generated automatically by a server-side script pulling the information from a database. The XML is formatted as follows:

<?xml version="1.0"?><markers>
  <marker>
    <name>VODAFONE</name>
    <address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>
    <lat>17.74033553</lat>
    <lng>83.25067267</lng>
  </marker>
  <marker>
    <name>VODAFONE</name>
    <address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
    <lat>17.73254774</lat>
    <lng>83.29195094</lng>
  </marker>
  ⋮
</markers>

The root element is markers, and it contains a series of marker elements, each containing a text address, latitude, and longitude.

Before we can load this XML and use it to place markers on our map, we first need to include the Google Maps JavaScript and the jQuery library in our HTML page.

The two libraries we’ll be relying on for our functionality are, unsurprisingly, jQuery and the Google Maps API library itself. As far as jQuery is concerned, you can simply download the latest version from the jQuery home page and include it in your HTML page as follows:

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

For the Google Maps code, we can link directly to the Google servers:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

The sensor=false parameter specifies that we don’t want to use a sensor (like a GPS locator) to determine the user’s location.

Now that we have our basic libraries, we can start building our functionality.

Let’s start with the skeleton of our map code:

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

We’re packaging all our map functionality inside a JavaScript object called MYMAP, which will help to avoid potential conflicts with other scripts on the page. The object contains two variables and two functions. The map variable will store a reference to the Google Map object we’ll create, and the bounds variable will store a bounding box that contains all our markers. This will be useful after we’ve added all the markers, when we want to zoom the map in such a way that they’re all visible at the same time.

Now for the methods: init will find an element on the page and initialize it as a new Google map with a given center and zoom level. placeMarkers, meanwhile, takes the name of an XML file and will load in coordinate data from that file to place a series of markers on the map.

Now that we have the basic structure in place, let’s write our init function:

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

We create an object literal to contain a set of options, using the parameters passed in to the method. Then we initialize two objects defined in the Google Maps API—a Map and a LatLngBounds—and assign them to the properties of our MYMAP object that we set up earlier for this purpose.

The Map constructor is passed a DOM element to use as the map on the page, as well as a set of options. The options we’ve prepared already, but to retrieve the DOM element we need to take the selector string passed in, and use the jQuery $ function to find the item on the page. Because $ returns a jQuery object rather than a raw DOM node, we need to drill down using [0]: this allows us to access the “naked” DOM node.

So once this function has run, we’ll have our map displayed on the page, and have an empty bounding box, ready to be expanded as we add our markers.

Speaking of which, let’s have a look at the placeMarkers function:

MYMAP.placeMarkers = function(filename) {
  $.get(filename, function(xml){
    $(xml).find("marker").each(function(){
      var name = $(this).find('name').text();
      var address = $(this).find('address').text();
      
      // create a new LatLng point for the marker
      var lat = $(this).find('lat').text();
      var lng = $(this).find('lng').text();
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
      
      // extend the bounds to include the new point
      MYMAP.bounds.extend(point);

      // add the marker itself
      var marker = new google.maps.Marker({
        position: point,
        map: MYMAP.map
      });

      // create the tooltip and its text
      var infoWindow = new google.maps.InfoWindow();
      var html='<b>'+name+'</b><br />'+address;

      // add a listener to open the tooltip when a user clicks on one of the markers
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(MYMAP.map, marker);
      });
    });
    
    // Fit the map around the markers we added:
    MYMAP.map.fitBounds(MYMAP.bounds);
  });
}

This function is a little more complicated, but it’s easy to make sense of. First we call jQuery’s $.get method to execute an Ajax GET request. The method takes two parameters: the URL to request (in this case, our local XML file), and a callback function to execute when the request concludes. That function, in turn, will be passed the response to the request, which in this case will be our XML.

jQuery treats XML exactly the same as HTML, so we can use $(xml).find('marker’).each( … ) to loop over each marker element in the response XML and create a marker on the map for each one.

We grab the name and address of the markers, then we create a new LatLng object for each one, which we assign to a point variable. We extend the bounding box to include that point, and then create a marker at that location on the map.

We want a tooltip bubble to appear whenever a user clicks on those markers, and we want it to contain the name and address of our location. Therefore, we need to add an event listener to each marker using the Maps API event.addListener method. Before we do that, though, we’ll create the tooltip itself. In the Google Maps API, this type of tooltip is called an InfoWindow. So we create a new InfoWindow, and also set up some HTML to fill it with the necessary information. Then we add our event listener. The listener will fire whenever one of the markers is clicked, and both set the content of the InfoWindow and open it so it’s visible on the map.

Finally, after adding all the markers and their associated event handlers and InfoWindows, we fit the map to the markers by using the Maps API’s fitBounds method. All we need to pass it is the bounds object we’ve been extending to include each marker. This way, no matter where the map has been zoomed or panned, it will always snap back to an ideal zoom level that includes all our markers.

Now that our code is ready, let’s put it into action. We’ll use jQuery’s $('document').ready to wait until the page is loaded, then initialize the map, pointing it to the page element with an id of map using the #map selector string:

$(document).ready(function() {
  $("#map").css({
    height: 500,
    width: 600
  });
  var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
  MYMAP.init('#map', myLatLng, 11);
    $("#showmarkers").click(function(e){
    MYMAP.placeMarkers('markers.xml');
  });
});

We also attach a click event listener to the #showmarkers button. When that button is clicked, we call our placeMarkers function with the URL to our XML file. Give it a spin and you’ll see a set of custom markers show up on the map.

You’ve probably guessed that there’s a lot more to the Google Maps API than what we’ve covered here, so be sure to check out the documentation to get a feel for everything that’s possible.