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?