Dopo aver visto come integrare google Maps sul proprio sito vediamo come aggiungere alla mappa creata un piccolo segnalino che indichi la posizione di un punto specifico.
Facciamo anche in modo che cliccando sul segnalino si apra un fumetto con una scritta a nostra scelta.
Le operazioni sono molto semplici e veloci e i risultati immediati.
Consiglio comunque per prima cosa di leggere l’articolo “come integrare google Maps sul proprio sito” in modo da avere le idee chiare su come ottenere la chiave per il proprio sito e dove mettere la mappa all’interno della pagina.

In questo articolo vediamo invece la parte javascript che metterà il segnalino con il fumetto.

<script
  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=CHIAVEDIGOOGLEMAPS"
  type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
  if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GOverviewMapControl());
  map.setCenter(new GLatLng(43.105902, 12.462036), 16);
  map.setMapType(G_HYBRID_TYPE); 

  var icon1 = new GIcon();
  icon1.image = "images/mm_20_red.png";
  icon1.shadow = "images/mm_20_shadow.png";
  icon1.iconSize = new GSize(12, 20);
  icon1.shadowSize = new GSize(22, 20);
  icon1.iconAnchor = new GPoint(6, 20);
  icon1.infoWindowAnchor = new GPoint(5, 1);
  var marker = new GMarker(new GPoint(12.462036,43.105902));
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<b>Ecco il nostro fumetto!</b>
    <br />Dentro il fumetto si possono utilizzare i tag html");
    });
  map.addOverlay(marker);
  }
}

//]]>
</script>

Adesso alcune indicazioni su come configurare google maps

La riga

  map.setCenter(new GLatLng(43.105902, 12.462036), 16);

è dove va inserito il punto centrale della mappa con il livello di zoom (16 è molto alto).

La riga

  var marker = new GMarker(new GPoint(12.462036,43.105902));

è dove deve essere inserita latitudine e longitudine del segnalino

La riga

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<b>Ecco il nostro fumetto!</b><br />
    Dentro il fumetto si possono utilizzare i tag html");
    );

è quella che permette di aggiungere il testo all’apertura del fumetto sul segnalino.