var map, map1, map2, map3; // map variables should be global
function initialize() {
// Create an array of styles.
var styles = [
{
featureType: "landscape",
elementType: "all",
stylers: [
{ color: "#F7F3F3" }
]
},
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -20}
]
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{ visibility: "simplified" },
{ color: '#E4E2E2' },
{ wight: 1.6 }
]
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [
{ visibility: "simplified" },
{ color: '#ffffff' },
{ wight: 1.6 }
]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ visibility: "simplified" },
{ color: '#BDBDBD' },
{ wight: 1.6 }
]
}, {
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" });
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(40.773938, -73.972602),
// control button states
// control buttons are boolean (true or false)
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
// create map here
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// these are tab controls
$('#tab_map1').on('shown', function (e) {
if (map1 == undefined) {
map1 = new google.maps.Map(document.getElementById('googleMap1'), mapOptions);
map1.mapTypes.set('map_style', styledMap);
map1.setMapTypeId('map_style');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.773938, -72.972602),
map: map1,
title: 'Hello World!'
});
}
});
$('#tab_map2').on('shown', function (e) {
if (map2 == undefined) {
map2 = new google.maps.Map(document.getElementById('googleMap2'), mapOptions);
map2.mapTypes.set('map_style', styledMap);
map2.setMapTypeId('map_style');
}
});
$('#tab_map3').on('shown', function (e) {
if (map3 == undefined) {
map3 = new google.maps.Map(document.getElementById('googleMap3'), mapOptions);
map3.mapTypes.set('map_style', styledMap);
map3.setMapTypeId('map_style');
}
});
// set a marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.773938, -73.972602),
map: map,
title: 'Hello World!'
});
}
// initialize map
google.maps.event.addDomListener(window, 'load', initialize);