On my contact page , I have a Google Map V3 that is styled and mostly functional, except for some sprite image display issues. Now, I need to include the same JSON data in two separate maps on my showrooms page . How can I style multiple maps with different locations? The JavaScript is called in the page head;
<script type="text/javascript">
$(document).ready(function() {
// Code for V3 map
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng('51.4600368','0.0781994'),
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
var map = new google.maps.Map(document.getElementById("head-office-map"), mapOptions);
var styles = [
// Add map styles here...
];
map.setOptions({styles: styles});
var contentString = "";
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var $image = new google.maps.MarkerImage("../images/icons/LK-mapicon.png",
// size
new google.maps.Size(50, 50),
// origin
new google.maps.Point(0, 0),
// anchor
new google.maps.Point(25, 50)
);
var $shadow = new google.maps.MarkerImage("../images/icons/LK-mapicon-shadow.png",
// size
new google.maps.Size(65, 39),
// origin
new google.maps.Point(0, 0),
// anchor
new google.maps.Point(25, 50)
);
var marker = new google.maps.Marker({
clickable: false,
position: myLatlng,
map: map,
title:"Liebe Kuchen Head Office",
icon:$image,
shadow:$shadow
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});