Latest web development tutorials

Google Maps Event

Cliquez sur un marqueur pour zoomer - liaison sur une carte google événements.


Cliquez sur une carte de marqueur Zoom

Nous utilisons encore carte papier à nouveau en utilisant Londres.

les utilisateurs de point pour atteindre lorsque le marqueur est cliqué fonction de zoom (zoom marqueur de carte est cliqué événement de liaison).

Le code se présente comme suit:

Exemples

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

Essayez »

Utilisez addListener () gestionnaire d'événements pour enregistrer un écouteur d'événement. La méthode utilise un objet, un événement pour écouter, quand un événement spécifié se produit sera appelé.


Réinitialiser le drapeau

Nous ajoutons un gestionnaire d'événements à la carte pour changer la propriété 'centre', utilisez le code suivant après 3 secondes d'événements center_changed seront marqués centre de changement:

Exemples

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

Essayez »


Lorsque le marqueur est cliqué pour ouvrir la fenêtre d'information.

Cliquez sur un marqueur pour afficher du texte dans la fenêtre de message:

Exemples

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Essayez »


Définir l'étiquette et les informations d'étiquette pour chaque fenêtre ouverte

La mise en œuvre d'une fenêtre lorsque l'utilisateur clique sur la carte

Les utilisateurs cliquent sur la carte pour une fonction position de marqueur de position () sur l'endroit désigné pour placer un marqueur, et pop-up fenêtre de message:

Exemples

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}

Essayez »


Google Maps - Manuel de l'événement

Google Maps API Manuel de référence .