Информационное окно запуска внешней ссылки с Google Maps / JQuery - PullRequest
Новая
       9

Информационное окно запуска внешней ссылки с Google Maps / JQuery

2 голосов
/ 19 января 2012

Начал играть с 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 на карте?

Ответы [ 2 ]

2 голосов
/ 19 января 2012

Сделайте свой 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]);
}

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

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

0 голосов
/ 19 января 2012

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

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

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

...