月份:2015年8月

google map vpi第三个版本后,载入速度快了很多,部分调用代码也有所改变。示例里面,有多个marker的示例,但却没有给出配套的infowindow的代码,参考了一下其他网友的写法后,得到以下可运行的代码。

var map;
var infowindow = null;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 2,
center: {lat: 20, lng: 0}
});
setMarkers(map,sites);
infowindow = new google.maps.InfoWindow({
content: “loading…”
});
}

var sites = [
[‘site1′, 22, 114,’img/star.png’,’info content1′],
[‘site2′, 32, 114,’img/flag.png’,’info content2′],
[‘site3′, 42, 114,’img/flag.png’,’info content2′],
];

function setMarkers(map,markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var marker = new google.maps.Marker({
position: {lat: sites[1], lng: sites[2]},
map: map,
icon: sites[3],
title: sites[0],
html:sites[4]
});
google.maps.event.addListener(marker, “click”, function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}

注:

1、请在同目录下的img文件夹,添加star.png和flag.png两个图像文件;

2、参考:http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/