Инициирование внешней ссылки InfoWindow с помощью Google Maps/JQuery

Начал играть с Google Maps API V3. У меня есть список мест в HTML с некоторыми координатами данных. Однако места заполняются на карте, и я хочу, чтобы при нажатии на реальную ссылку (т.е. место 1) за пределами карты также открывалось информационное окно.

HTML:

<div id="map"></div>

<div id="places">
   <div class="map-location" data-coordinates='{"lat" : 40.71837, "long" : -74.00608}'>
     <a href="http://link1.com">Place 1</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71435, "long" : -74.00597}'>
     <a href="http://link2.com">Place 2</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71803, "long" : -74.00305}'>
     <a href="http://link3.com">Place 3</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.74238, "long" : -73.98946}'>
     <a href="http://link4.com">Place 4</a>
   </div>
</div>

JS:

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));
});

Как мне настроить щелчок для каждой ссылки, чтобы вызвать окно infoWindow на карте?


jquery google-maps-api-3 infowindow
person user906080    schedule 19.01.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Сделайте свой JS таким: сделайте глобальный массив вне функции:

var infoArray = new Array();
var markerArray = new Array();

и сохраните каждый экземпляр информационного окна:

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });
 markerArray[myLatLng] = otherMarkers;

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));

});

infoArray[myLatLng] = infowindow;

и сделайте функцию в HTML:

<div id="map"></div>

<div id="places">
   <div class="map-location" >
     <a href="http://link1.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 1</a>
   </div>
   <div class="map-location" >
     <a href="http://link2.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 2</a>
   </div>
   <div class="map-location" >
     <a href="http://link3.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 3</a>
   </div>
   <div class="map-location" >
     <a href="http://link4.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 4</a>
   </div>
</div>

и сделайте функцию JS:

function infoOpen(lat,lng){
   var myLatLng = new google.maps.LatLng(lat,lng);
   infoArray[myLatLng].open(map,markerArray[myLatLng]);
}

сделать переменную карты также глобальной.

Также настроить его в соответствии с вами.

person Code Lღver    schedule 19.01.2012
comment
Пробовал это, но это не сработало должным образом. Вместо этого я нашел это похожее решение, которое использует функцию для запуска щелчка маркера: goo.gl/1f9f0p - person radu.luchian; 19.03.2014

arrow_upward
0
arrow_downward

Этот пример выполняет то, что вы пытаетесь сделать:

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm

надеюсь это поможет!

person Bassam Mehanni    schedule 19.01.2012