My HTML:
<div id="map_canvas" style="width: 625px; height: 500px;"></div>
My JQuery:
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(40.68194, -73.94439);
var myOptions = {
zoom: 13,
center: centerMap,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading...", maxWidth: 150
});
//var bikeLayer = new google.maps.BicyclingLayer();
//bikeLayer.setMap(map);
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
How can I achieve,
To show site[0] infobubble on page load by default.
To have different marker for each on the map.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…