Несколько маркеров и открытое / закрытое информационное окно
Я использую Google Maps V3, и я просмотрел многие темы здесь и в Интернете, как использовать несколько маркеров и открывать / закрывать информационное окно. Я мог сделать каждый из них по отдельности, но не когда вместе.
Есть некоторые закомментированные разделы моего кода только из экспериментов и просмотра ссылок в Интернете. Мне было интересно, если кто-то мог видеть, где я не прав, и объяснить немного, почему они сделали то, что сделали. ТАКЖЕ моя maxWidth не устанавливает правильную ширину, и я не уверен почему. Я несколько раз менял размеры, и к информационному окну на карте не применялось никаких изменений.
Спасибо!
файл map.js:
$(document).ready(function() {
function initialize() {
var defaultCoords = new google.maps.LatLng(42.730173,-73.678810);
var mapOptions = {
zoom: 16,
center: defaultCoords,
streetViewControl: false,
zoomControl: false
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$.getJSON('resources/js/searchtest.json', function (response)
{
handleData(response, map);
//handling errors in search queries
if (response.errors.length > 0) {
console.log(response.errors);
for (var i=0; i<response.errors.length; i++) {
$('#searchErrors').append("<p>" + response.errors[i] + "</p>");
}
}
});
}
google.maps.event.addDomListener(window,'resize',initialize);
google.maps.event.addDomListener(window, 'load', initialize);
function handleData(response, map) {
//alert(response);
var lat, lon, myLatLng,
marker, infowindow, contentString;
var infowindow = null;
var activeWindow = null;
$.each( response.posts, function(i, post) { //add marker each time
contentString = '';
lat = post.latitude;
lon = post.longitude;
myLatLng = new google.maps.LatLng(lat,lon);
marker = new google.maps.Marker({ //creating new marker
position: myLatLng,
map: map
});
//what is in info window
contentString = "<h4>" + post.title + "</h4>"
+ "</br>" + convertTime(post.time);
infowindow = new google.maps.InfoWindow({
content: contentString, //putting content in window
maxWidth: 160
});
google.maps.event.addListener(marker, 'click', getInfoCallback(map, activeWindow, contentString));
});
//setting the new center after getting the items
map.setCenter(new google.maps.LatLng(response.centralLat, response.centralLon));
}
function convertTime(UNIXtime) {
// var formattedTime = UNIXtime;
// return formattedTime;
}
function getInfoCallback(map, activeWindow, content) {
var infowindow = new google.maps.InfoWindow({
content: content});
return function() {
//infowindow.setContent(content);
//close active window if exists
if(activeWindow != null) activeWindow.close();
//open new window
infowindow.open(map, this); //adding listening for window
activeWindow = infowindow; //store new window in global variable
};
}
});