Я занят script, который сделает холст карт Google на моем сайте с несколькими маркерами. Я хочу, чтобы при щелчке по маркеру открылось окно. Я сделал это, и код в данный момент:
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function addMarker(map, address, title) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:title
});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<strong>'+title + '</strong><br />' + address);
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
addMarker(map, 'Address', 'Title');
addMarker(map, 'Address', 'Title');
Это работает 100%. Но теперь я хочу, чтобы, когда одна инфузия открыта, и вы хотите открыть вторую, первая автоматически закрывается. Но я не нашел способ сделать это. infowindow.close(); не поможет. У кого-нибудь есть пример или решение этой проблемы?
infowindow - это локальная переменная, и окно недоступно в момент закрытия()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;
...
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
...
});
...
Объявить глобальные переменные:
var mapOptions;
var map;
var infowindow;
var marker;
var contentString;
var image;
В intialize используйте метод addEvent:
google.maps.event.addListener(map, 'click', function() {
if (infowindow) {
infowindow.close();
}
});
Для циклов, которые динамически создают infowindows, объявляют глобальную переменную
var openwindow;
а затем в вызове функции addListener (который находится внутри цикла):
google.maps.event.addListener(marker<?php echo $id; ?>, 'click', function() {
if(openwindow){
eval(openwindow).close();
}
openwindow="myInfoWindow<?php echo $id; ?>";
myInfoWindow<?php echo $id; ?>.open(map, marker<?php echo $id; ?>);
});
У меня был динамический цикл, который создавал infowindows и маркеры на основе того, сколько из них было введено в CMS, поэтому я не хотел создавать новый InfoWindow() при каждом щелчке события и подталкивать его запросами, если это когда-либо возникло. Вместо этого я попытался понять, какая конкретная переменная infowindow для каждого экземпляра будет отсутствовать из заданного количества мест, которые у меня были, а затем предложила Maps закрыть все из них до того, как она откроет правильный.
Мой массив местоположений назывался местоположениями, поэтому PHP я установил до фактическую инициализацию карт, чтобы получить мои имена переменных infowindow:
for($k = 0; $k < count($locations); $k++) {
$infowindows[] = 'infowindow' . $k;
}
Затем после инициализации карты и т.д. в script у меня был цикл PHP foreach, создающий динамические информационные окна с помощью счетчика:
//...javascript map initilization
<?php
$i=0;
foreach($locations as $location) {
..//get latitudes, longitude, image, etc...
echo 'var mapMarker' . $i . ' = new google.maps.Marker({
position: myLatLng' . $i . ',
map: map,
icon: image
});';
echo 'var contentString' . $i . ' = "<h1>' . $title[$i] . '</h1><h2>' . $address[$i] . '</h2>' . $content[$i] . '";';
echo 'infowindow' . $i . ' = new google.maps.InfoWindow({ ';
echo ' content: contentString' . $i . '
});';
echo 'google.maps.event.addListener(mapMarker' . $i . ', "click", function() { ';
foreach($infowindows as $window) {
echo $window . '.close();';
}
echo 'infowindow' . $i . '.open(map,mapMarker'. $i . ');
});';
$i++;
}
?>
...//continue with Maps script...
Итак, до того, как я назвал всю карту script, у меня был массив с именами, которые, как я знал, будут выводиться при создании InfoWindow(), например infowindow0, infowindow1, infowindow2, etc...
Затем, в событии click для каждого маркера, цикл foreach проходит и говорит закрыть все из них, прежде чем вы выполните следующий шаг по их открытию. Оказывается, выглядит так:
google.maps.event.addListener(mapMarker0, "click", function() {
infowindow0.close();
infowindow1.close();
infowindow2.close();
infowindow0.open(map,mapMarker0);
}
Просто другой способ делать то, что я предполагаю... но я надеюсь, что это поможет кому-то.
У меня есть что-то вроде следующего
function initMap()
{
//...create new map here
var infowindow;
$('.business').each(function(el){
//...get lat/lng
var position = new google.maps.LatLng(lat, lng);
var content = "contents go here";
var title = "titleText";
var openWindowFn;
var closure = function(content, position){.
openWindowFn = function()
{
if (infowindow)
{
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
position:position,
content:content
});
infowindow.open(map, marker);
}
}(content, position);
var marker = new google.maps.Marker({
position:position,
map:map,
title:title.
});
google.maps.event.addListener(marker, 'click', openWindowFn);
}
}
В моем понимании использование такого закрытия позволяет захватывать переменные и их значения во время объявления функции, а не полагаться на глобальные переменные. Поэтому, когда openWindowFn вызывается позже, например, на первом маркере переменные content и position имеют значения, которые они выполняли во время первой итерации в функции each().
Я не уверен, как openWindowFn имеет infowindow в своей области. Я также не уверен, что делаю все правильно, но он работает даже с несколькими картами на одной странице (каждая карта получает одно открытое окно).
Если у кого-нибудь есть идеи, прокомментируйте.
Я рекомендую вам попробовать goMap плагин jQuery при работе с Картами Google. Для такой ситуации вы можете установить hideByClick в true при создании маркеров:
$(function() {
$("#map").goMap({
markers: [{
latitude: 56.948813,
longitude: 24.704004,
html: {
content: 'Click to marker',
popup:true
}
},{
latitude: 54.948813,
longitude: 21.704004,
html: 'Hello!'
}],
hideByClick: true
});
});
Это всего лишь один пример: у него есть много функций, которые можно предложить, например, группировать маркеры и манипулировать информационными окнами.
Вам нужно нажать на свою карту - $('#map-selector').click();
При работе с маркерными кластерами это работало для меня.
var infowindow = null;
google.maps.event.addListener(marker, "click", function () {
if (infowindow) {
infowindow.close();
}
var markerMap = this.getMap();
infowindow = this.info;
this.info.open(markerMap, this);
});