Multiple Google Maps using V3 API

Question

I have several Google Maps on one page and each has its own set of Lat/Lng co-ordinates. As a result I have added in the JavaScript options for each one individually as follows:

function initialize() {
   var myLatlng1 = new google.maps.LatLng(49.18589, -2.19917);
   var myLatlng2 = new google.maps.LatLng(101.1986, -50.2445);
   var myLatlng3 = new google.maps.LatLng(29.125285,-82.048823);

  var mapOptions1 = {
     zoom: 17,
     center: myLatlng1
  };
  var mapOptions2 = {
     zoom: 17,
     center: myLatlng2
  };
  var mapOptions3 = {
     zoom: 17,
     center: myLatlng3
  };

  location_1 = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions1);
  location_2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
  location_3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);

  marker1 = new google.maps.Marker({
     position: myLatlng1,
     map: location_1
  });

  marker2 = new google.maps.Marker({
     position: myLatlng2,
     map: location_2
  });

  marker3 = new google.maps.Marker({
     position: myLatlng3,
     map: location_3 
  }); 
}

The HTML is:

<div id="location_1>
  <div id="map-canvas1></div>
</div>
<div id="location_2>
  <div id="map-canvas2></div>
</div>
<div id="location_3>
  <div id="map-canvas3></div>
</div>

This just feels like a really long-winded way of doing things seeing as everything has a similar identifier - is there a better way of doing this?

Answer 1

Have you considered an array?

You can then create multiple objects, having each object the values per point.

Like this:

var coords = [
    {lat: 49.18589, lng: -2.19917, zoom: 17},
    {lat: 101.1986, lng: -50.2445, zoom: 17},
    {lat: 29.125285, lng: -82.048823, zoom: 17}
];
var markers = [];
var maps = [];

function initialize() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}

---

Here's what I did:

1. Created a few variables at the top, with needed information.
2. Created a loop to go through all the elements
3. Reduced the number of local variable to the bare minimum
4. Removed global variables being declared inside the function

Notice that I have this for loop:

for(var i = 0, length = coords.length; i < length; i++)

I'm not accessing the length property directly because it may decrease performance. Accessing a local variable is always faster than a property in an array/object.

Also, since i starts in 0 and your elements' id starts in 1, I had to add 1 to i, to match the right element.

Using an array, you also don't need to re-re-re-repeat everytime you need to add a point: just add a new element inside the array coords.

---

I hope you can understand everything and hope it is clear enough for you. And hope it really helps you.