Latest web development tutorials

Google Maps Event

Click a marker to zoom - binding on google map events.


Click a marker Zoom map

We still use paper map again using London.

Point users to achieve when the marker is clicked zoom function (zoom map marker is clicked binding event).

Code is as follows:

Examples

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

try it"

Use addListener () event handler to register an event listener. The method uses an object, an event to listen for, when a specified event occurs will be called.


Reset flag

We add an event handler to the map to change the 'center' property, use the following code after 3 seconds center_changed event will be marked shift center:

Examples

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

try it"


When the marker is clicked to open the info window.

Click a marker to display some text in the message window:

Examples

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

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

try it"


Set the label and tag information for each open window

Implementation of a window when the user clicks on the map

Users click on the map to a position placeMarker () function on the designated location to place a marker, and pop-up message window:

Examples

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);
}

try it"


Google Maps - Event Manual

Google Maps API Reference Manual .