Capt. Horatio T.P. Webb
Using Google Maps -- Part III
Multiple Markers and Map Boundaries
Spring 2015
Last Updated 12PM 1/6/2015

Once we have the basic Google map and a marker on a web page (as shown in Part II), we can now:

  1. Multiple Markers

    To use multiple markers we will rely on javascript arrays and loops to position multiple locations on a Google map.

  2. The Data

    The data will be 15 of the 16 European locations of my great-great grandparents ancestors (there is one that I do not know).

    The global two dimensional array named gggp_locations (a 15 row and 5 column array) that holds the data for each of the ancestors.

    Each person has: tooltip text; latitude; longitude; the marker letter, and the marker color in hex).
    The two dimensional array declaration looks like this:

    
    var gggp_locations =[
      ['Edward Nash 1725 Tenby Pembrokeshire, Wales'                          ,51.672649, -4.703512,'N','ff0000'],
      ['James Parker 1630 Warleggan Cornwall England'                         ,50.483636, -4.604203,'P','dd0000'],
      ['Jonas Weed 1630 Stanwick Northamptonshire, England'                   ,52.328703, -0.562805,'W','bb0000'],
      ['Emmanuel Wells, 1645 Bristol England'                                 ,51.454157, -2.588306,'W','880000'],
      ['Christopher Jeffares 1790 Rathronan Wexford Ireland'                  ,52.241211, -6.558088,'J','66ff66'],
      ['John Rainey 1750 Ballywindelland, Ballymoney, County Antrim, Ireland' ,55.070788, -6.510188,'R','66dd66'],
      ['Peter Gunnarson Rambo 1640 Ramberget, Gothenburg, Sweden'             ,57.714320, 11.935760,"R",'66bb66'],
      ['Clement Lanier 1628 St. Alfege Greenwich,England'                     ,51.480460, -0.009774,'L','668866'],
      ['John Parks 1750 County Down N. Ireland'                               ,54.328132, -5.725142,'P','6666ff'],
      ['John McCollum 1657 Poltollach Argyll Scotland'                        ,56.153833, -5.588446,'M','6666dd'],
      ['Nicholas Van Eman 1718 Emmen, Drenthe, Netherlands  '                 ,52.784545,  6.895902,'V','6666bb'],
      ['Peter Hayes 1630  Great Budworth, Cheshire, , England'                ,53.293943, -2.504784,'H','666688'],
      ['John Hockenhull 1812 Tarvin Cheshire England'                         ,53.189552, -2.773765,'H','ff00ff'],
      ['John Brown 1740 Belfast Northern Ireland'                             ,54.858290, -5.810547,'B','dd00dd'],
      ['Thomas Browning 1650 Bookthorp Gloucestershire, England'              ,51.808709, -2.237826,'B','bb00bb']
      ];  
    

    As we process each location inside a loop, we can use the five items in each location. Each location is a row in the two dimensional table named gggp_locations. Each row is identified by an number (an index or subscript - in this case 0 → 14) and in each row there are five items and we use another number (an index or subscript -- in this case 0 → 4) to identify which column the data is in. So if we use i as the subscript for the row number then:

    the ith tooltip text is: gggp_locations[i][0]
    the ith latitude is: gggp_locations[i][1]
    the ith longitude is: gggp_locations[i][2]
    the ith marker letter is: gggp_locations[i][3]
    the ith marker color is: gggp_locations[i][4]

  3. The Image Array

    We will also use a global array of images named image_array to store the various colored marker images. Note that there will be one array element for each location: image_array[i] where i will be the subscript from 0 → 14.

         var image_array = [];
    

  4. The Map

    We globally define the map named map like this:

         var map;     
    

    Then inside the function we create the map and connect it to the DIV block on the HTML page where it will appear -- like this:

         map = new google.maps.Map(document.getElementById("map_canvas"));
    

  5. Using Lat/Lng bounds to size the map

    In this version we will NOT use MapOptions which normally places the center of the map and sets the zoom level. This is because we want to get all the places on the map (using their latitude and longitude data) and then have the google maps code automatically determine the appropriate map size and its center that makes all the locations visible. This is done using the .LatLngBounds() feature:

         var bounds = new google.maps.LatLngBounds();
    
    We create a latitude/longitude value for each person like this:
          var thisLatLng = new google.maps.LatLng(gggp_locations[i][1], gggp_locations[i][2]);
    

    and then add it to the list of locations we wish to use to define the extents of the map (i.e., the eastern-most, western-most, southern-most and northern-most locations) like this:
         bounds.extend(thisLatLng);
    

    After the loop we reset the map boundaries and zoom by fitting all the data together, and determine their extents and calculate the value for zoom by saying:
         map.fitBounds(bounds);
    
  6. Storing the marker icon in an array

    For each location we use gggp_locations[i][3] to get the marker letter and gggp_locations[i][4] to get the marker color and retrieve the correct marker icon from Google. We first create a place for the image in the image_array and then set the value of .src using the appropriate letter (stored in gggp_locations[i][3]) and color (stored in gggp_locations[i][4]). We retrieve the marker image from Google by specifying the letter and color to define the specific marker image (i.e. we use the gggp_locations array). The general format of the URL is:

         https://www.googlemapsmarkers.com/v1/letter_to_display/marker_color/

    In the javascript code we insert the letter (from gggp_locations[i][3]) and the marker color (from gggp_locations[i][4]) into the URL like this:

         image_array [i]= new Image();
         image_array[i].src = 'https://www.googlemapsmarkers.com/v1/'  + gggp_locations[i][3] + '/' + gggp_locations[i][4] + '/'; 
    

  7. Making the marker (and its listener) by calling a separate function

    To create the marker we will call a separate function like this:

         createMarker(i,thisLatLng);
    

    Here we pass two arguments: (a) the loop index (i.e., which location); and (b) the LatLng co-ordinates.

    The function looks like this:

    
         function createMarker(k,theLatLng)
         {
          var marker = new google.maps.Marker({
                        position: theLatLng,
                        map: map,
                        icon: image_array[k].src,
                        title: gggp_locations[k][0]
                        });
           google.maps.event.addListener(marker, 'click', function() {
           map.setZoom(16);
           map.setCenter(marker.getPosition());
           });
         }     
    

    The function appears almost exactly like our previous examples except that:

  8. The Code

    The javascript code for the data and the functions initialize() and create_marker() is:

  9. Executing the Code

    The javascript is executed by using the onload event in the body tag like this:

         <body onload="initialize()">
    

  10. The resulting map:

    Done!

Part IV -- Google Map Paths (not assigment #2 material)

Assignment #2