# Multiple Google Maps using V3 API

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 mapOptions1 = {
zoom: 17,
center: myLatlng1
};
var mapOptions2 = {
zoom: 17,
center: myLatlng2
};
var mapOptions3 = {
zoom: 17,
center: myLatlng3
};

position: myLatlng1,
map: location_1
});

position: myLatlng2,
map: location_2
});

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?

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
});

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.

• @Lighty_46 You're welcome. I'm glad you like my solution. I trully hope it helps a lot in the future Jul 29, 2015 at 14:33