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.

• Ismael Miguel: @Lighty_46 You're welcome. I'm glad you like my solution. I trully hope it helps a lot in the future