2016-07-26 25 views
0

Ich möchte, wenn der Benutzer auf einen Marker klickt, möchte ich ihm ein Popup mit einigen Informationen anzeigen (zum Beispiel: sagen wir mal, die Marker stehen für Orte, wenn er auf einen Marker klickt zu ihm alle Informationen dieses Standortes)Meteor - Google Maps marker click event

Was ist der einfachste Weg, dies zu tun?

+0

Ziemlich sicher Google Maps generiert benutzerdefinierte Ereignisse für solche Dinge. Wenn Sie React verwenden, gibt es ein [npm-Paket, das ich für GM verwendet habe] (https://github.com/tomchentw/react-google-maps), das gut funktioniert hat, und ich denke, eines ihrer Beispiele war, wie man Custom implementiert Klicken Sie auf Ereignisse auf den Markierungen. – CodeChimp

+0

Ich benutze nur Meteor (Blaze in Frontend) .. –

+0

Verwenden Sie nicht einfach GMAPs aus der Box - verwenden Sie das Paket in meiner Antwort erwähnt oder Sie verbringen Zeit neu erfinden das Rad. Dieses Paket behandelt alle Ladeauftragsoperationen. – NicholasByDesign

Antwort

0

In der Dokumentation Google Maps erfahren Sie, wie Sie Ereignis-Listener auf Ihren Markern einrichten. Sie sollten dies in Ihrem Blaze-Vorlagencode tun können, am wahrscheinlichsten in der onCreated() oder onRendered() der Vorlage.

0

Lösung ist:

marker.addListener('click', function() { 
    swal({ 
     title: "More details", 
     text: "Type what you want here", 
     }); 
}); 

Grüße,

0

Dieses Paket https://github.com/dburles/meteor-google-maps

HTML

{{> googleMap name="map" options=mapOptions}} 

JS-Client

Meteor.startup(function() { 
    GoogleMaps.load({ 
     v: '3', 
     key: 'YOUR_KEY' 
    }); 
}); 

Template.YOUR_TEMPLATE.helpers({ 
    mapOptions:() => { 
     if (GoogleMaps.loaded()) { 
      return { 
       center: new google.maps.LatLng(YOUR_MAP_LAT, YOUR_MAP_LNG), 
       zoom: 1 
      }; 
     } 
    } 
}); 

Template.YOUR_TEMPLATE.onRendered(function(){ 
    GoogleMaps.ready('map', function(map) { 
     let marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(YOUR_MARKER_LAT, YOUR_MARKER_LNG), 
      map: map.instance 
     }) 
     let infowindow = new google.maps.InfoWindow({ 
      content: 'SOME CONTENT' 
     }) 
     marker.addListener('click', function(event){ 
      infowindow.open(map.instance, marker); 
     }) 


    }); 
});