Après avoir récupéré une clé d’authentification et avoir fait notre premier appel à l’api google map, nous allons maintenant ajouter deux éléments sur la carte, à savoir:

• Les panneaux de contrôles (zoom et types de vues)
• Un marker personnalisé centré sur Brest avec son infobulle

Le code javascript demeure très similaire au précédent. Nous allons juste ajouter les panneaux de contrôles avec 2 lignes de code et une fonction qui se chargera de créer un marker.

A noter qu’en règle générale, on ajoute une condition qui englobe le code javascript. Cette condition, non intégrée ici, s’occupe de vérifier si le navigateur est capable d’afficher une carte Google Map.

Elle s’écrit de la manière suivante : if (GBrowserIsCompatible())

Ajout d’un marker sur la map

Dans ce code exmple, les expressions qui apparaissent en orange représentent des méthodes ou des classes de l’api Google Map.

<div id="mapG2" style="width: 630px; height: 350px;"></div>
<script type="text/javascript">

var gicons = [];
var infobulle;
var markerMember;

function demo2() {
  var address = 'Brest France';
  geocoder = new GClientGeocoder();
  z = 10;
  geocoder.getLatLng( address, function(point) {
    if (!point) {
      alert("- "+address+" n'existe pas");
    }
    else {
      var a =  point.lat();
      var b =  point.lng();
      initialize2(address,a,b,z);
    }
  });
}

function initialize2(address,a,b,z) {
  map = new GMap2(document.getElementById('mapG2'));
  map.addControl(new GLargeMapControl3D());
  map.addControl(new GMenuMapTypeControl());
  map.checkResize();
  gicons[0] = new GIcon(G_DEFAULT_ICON, "https://www.weboblog.fr/flag_blue.png");
  gicons[0].iconSize = new GSize(16,16);
  gicons[0].shadow="";
  gicons[0].iconAnchor = new GPoint(9,16);
  gicons[0].infoWindowAnchor = new GPoint(9,9);

  map.setCenter(new GLatLng(a,b), z);
  if(address!=''){
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, function(point){ map.setCenter(point,z); });
}
infobulle  = '<table width="200px" border="0"  height="60px"><tr>';
infobulle += '<td width="70px" align="left" valign="top">';
infobulle += '<img src="https://www.weboblog.fr/package_network.png" /></td>';
infobulle += '<td align="left" valign="top">';
infobulle += '<p style=" font-family:Tahoma; font-size:10px; color: #8080ff;">';
infobulle += '<b><u>Point de recherche</u> :</b><br /> '+address+'<br />';
infobulle += '<b>Latitude</b>: '+a+'<br />';
infobulle += '<b>Longitude</b>: '+b+'</p></td></tr></table>';
markerMember = createMarker(new GLatLng(a,b),infobulle,gicons[0]); // Ajout du marqueur
map.addOverlay(markerMember);
}	

function createMarker(point,html,icon){
  var marker = new GMarker(point,icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
} 

demo2();

</script>

On obtient alors cette carte avec les zoom et le choix du type de vues disponibles. En cliquant sur le marker, l’infobulle apparaît. Il est possible de déclencher l’ouverture de l’infobulle en fonction d’autres événements javascript (onmouseover, ondragdrop, …).

Le contenu de l’infobulle est libre, il s’agit de simple code html.