رویدادهای نقشه‌های گوگل

Zoom when you click on the marker

We still use the map from the previous page: a map centered on London, UK.

Now, we want to zoom when the user clicks on the marker (we attach an event handler to the marker so that the map zooms when clicked).

This is the added code:

مثال

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

We use the addListener() event handler to register event notifications. The parameters accepted by this method are:

• An object
• An event to listen to
• A function called when a specified event occurs

Pan back to the marker

Here, we save the zoom changes and pan the map after 3 seconds:

مثال

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

Open the info window when you click on the marker

When you click on the marker, an info window containing text will be displayed:

مثال

var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Set the marker and open an info window for each marker

When the user clicks on the map, the function runs.

placeMarker() کانکشن کو مستقل کیوئن میں ایک نشان میں رکھتا ہے، اور اس نشان کی لوگارٹی اور لانگیٹی کو شامل کئے جانے والے معلومات کا ویندو نمائش کرتا ہے:

مثال

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