Guida alla gestione dell’evento onclick sui Marker di Google Maps

Il “Marker” è la classica icona a forma di goccia visualizzata su una mappa per indicare un punto di interesse. Il posizionamento dell’icona su una Google Map può viene fatto creando un oggetto di tipo google.maps.Marker,  posizionandolo su una istanza  google.maps.Map, nelle opportune coordinate.

var markerMC = new google.maps.Marker({
    position: new google.maps.LatLng(43.2735500,13.4923373),
    map: map,
    title: 'Ufficio di MC'
});

Attivando un listener sull’oggetto, legato all’evento OnClick, è possibile intercettare il click dell’utente su uno dei punti di interesse (Marker) posizionati sulla mappa.

google.maps.event.addListener(markerMC, 'click', function() {
    // Ops... L'utente ha cliccato, devo fare qualcosa!
});

Nel seguente esempio, visualizzo una cartina dell’Italia e vi posiziono sopra le tre sedi della mia società. Cliccando su uno dei “Marker” indicanti le sedi, viene generato e gestito l’evento OnClick corrispondente.

<!DOCTYPE html>
<html>
  <head>
    <title>Gestione Marker - Google Maps API</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 500px;
		width: 500px;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

	function initialize() {
	  var mapOptions = {
		zoom: 5,
		center: new google.maps.LatLng(44.485901,11.402249)
	  };

	  var map = new google.maps.Map(document.getElementById('map-canvas'),
		  mapOptions);

	  var markerBO = new google.maps.Marker({
		position: map.getCenter(),
		map: map,
		title: 'Bologna'
	  });

	var markerMC = new google.maps.Marker({
		position: new google.maps.LatLng(43.2735500,13.4923373),
		map: map,
		title: 'Macerata'
	  });

	  var markerFR = new google.maps.Marker({
		position: new google.maps.LatLng(41.5808881,13.4240878),
		map: map,
		title: 'Anagni (FR)'
	  });

	  function showClick (marker)
	  {
		var mytxt = document.getElementById('click-marker');
		mytxt.innerHTML="Hai cliccato sulla sede di " + marker.title;
	  }

	  google.maps.event.addListener(markerBO, 'click', function() {
		showClick(markerBO);
	  });

	  google.maps.event.addListener(markerMC, 'click', function() {
		showClick(markerMC);
	  });

	  google.maps.event.addListener(markerFR, 'click', function() {
		showClick(markerFR);
	  });
	}

	google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body align="center">
	<p>Esempio di Gestione dei Marker su una Google Map - <a href="https://www.bottaioli.it">www.bottaioli.it</a></p>
    <div id="map-canvas"></div>
	<div id="click-marker">Clicca su una delle sedi della mia societ&agrave;</div>
  </body>
</html>

E’ possibile visualizzare un esempio funzionante su questo link: https://www.bottaioli.it/geo/clickmarker.html