私の質問が重複していることはわかっています。しかし、正確な答えが必要です。以下の js を Google マップ API に使用しましたが、私のサイトでは問題なく動作しますが、読み込みに時間がかかります。私のサイトでは、Google マップに 100 個のマーカーを表示しています。
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
どうすればページの速度を改善できるか教えてください。
ありがとう
編集
function initialize() {
var secheltLoc = new google.maps.LatLng(43.265305424381985, -88.81882460937499),
markers,
myMapOptions = {
zoom: 7,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
},
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var bounds = new google.maps.LatLngBounds();
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for (var i = 0; i < markerData.length; i++) {
var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
map: map,
draggable: false,
position: markerData[i].latLng,
animation: google.maps.Animation.DROP,
icon: markerData[i].logo
}),
boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
width: "450px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid #333; margin-top: 8px; background:white; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;height:100px; width:350px;";
boxText.innerHTML = "<div class='mainDiv'><div class='forImg' style='float:left;margin:4px 0 0 3px;'><img src=" + markerData[i].image + " /></div><div style='float:right; width:220px; margin-top:5px; padding-left:10px;'><div class='titleImg'>" + markerData[i].title + "</div><div class='descriptionTool'>" + markerData[i].address + "</div></div></div>";
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
newMarkers[i].infobox.close();
marker.set("myZIndex", marker.getZIndex());
google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
return function () {
newMarkers[i].infobox.open(map, this);
//marker.setIcon(icon1);
// styleIcon.set("color","#00ff00");
//map.panTo(markerData[i].latLng);
}
getHighestZIndex();
this.setOptions({zIndex: highestZIndex + 1});
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
return function () {
newMarkers[i].infobox.close(map, this);
// marker.setIcon(icon2);
// map.panTo(markerData[i].latLng);
}
this.setOptions({zIndex: this.get("myZIndex")});
})(marker, i));
}
return newMarkers;
}
markers = initMarkers(map, [
{ latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
{ latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
{ latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
]);
}