1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit(){
var centerCoord = new google.maps.LatLng(18.23, -66.39);
var mapOptions = {
zoom: 9,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$.getJSON("map.json", {}, function(data){
$.each(data.places, function(i, item){
$("#markers").append('<li><a href="#" rel="' + i + '">' + item.title + '</a></li>');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title,
num: i
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>"+ item.title +"</h3><p>"+ item.description +"</p>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function(e) {
for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
infowindow.open(map, marker);
});
});
});
}
$(function(){
// initialize map (create markers, infowindows and list)
mapInit();
// "live" bind click event
$("#markers a").live("click", function(){
var i = $(this).attr("rel");
for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
});
}); |
Partager