Γραφήματα Ενεργειών Google Maps

Μεγέθυνση όταν κλικάρει η σημαία

Επιμένουμε να χρησιμοποιούμε τον χάρτη από την προηγούμενη σελίδα: χάρτης με κέντρο τη Λονδίνο της Αγγλίας.

Τώρα, θέλουμε να μεγέθυνουμε τον χάρτη όταν ο χρήστης κλικάρει στη σημαία (προσθέτουμε έναν διαχειριστή συμβάντων στο σημαία για να μεγέθυνουμε τον χάρτη όταν κλικάρει).

Αυτό είναι το κώδικα που προσθέτουμε:

Παράδειγμα

// Μεγέθυνση στο 9 όταν κλικάρει η σημαία
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Χρησιμοποιούμε τον διαχειριστή συμβάντων addListener() για να εγγραφούμε σε ειδοποιήσεις συμβάντων. Οι παραμέτρους που δέχεται αυτή η μέθοδος είναι:

• Ένας αντικείμενο
• Ένα συμβάν που θα παρακολουθείται
• Μια λειτουργία που καλείται όταν συμβεί ένας ορισμένος παράγοντας

Μετακίνηση πίσω στην σημαία

Εδώ, αποθηκεύουμε τις αλλαγές μεγέθυνσης και μετακινήσουμε τον χάρτη μετά από 3 δευτερόλεπτα:

Παράδειγμα

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

Ανοίγματα παραθύρων πληροφοριών όταν κλικάρει η σημαία

Κλικ στην σημαία για να εμφανιστεί το παράθυρο πληροφοριών που περιέχει κείμενο:

Παράδειγμα

var infowindow = new google.maps.InfoWindow({
  content:"Γειά σου Κόσμε!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Ρύθμιση σημαίας και ανοίγματος παραθύρων πληροφοριών για κάθε σημαία

Η λειτουργία θα εκτελεστεί όταν ο χρήστης κλικάρει στο χάρτη.

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: 'Γεωγραφικό πλάτος: ' + location.lat() +
    'Διάρκεια: ' + location.lng()
  });
  infowindow.open(map,marker);
{}