Ajout d’un marker

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, "http://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="http://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.

8 Réponses à “Ajout d’un marker”

  1. Francis :

    Super site, une petite question comment forcer l’ouverture de l’infobulle
    c’est à dire que l’infobulle soit ouverte à l’ouverture de la carte
    d’avance merci

  2. webmaster :

    Bonjour Francis,

    Pour ouvrir l’infobulle au chargement de la carte, il suffit de modifier la fonction createMarker en enlevant l’écouteur d’événement de cette façon:

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

    NB : A noter que l’on ne peut ouvrir qu’une seule fenêtre à la fois.

  3. Francis :

    Bonjour,j’aimerais savoir en gardant le maximun d’informations notamment l’infobulle comment supprimer dans cette page le client geocoder afin de ne pas rentrer une adresse mais des coordonnées en dur.Car il y a des différences de positionnement, le client geocoder adresse se base sur les rues téléatlas et non sur les images google earth d’ou une différence notoire dans le positionnement XY.
    D’avance merci
    Très cordialement
    Francis

  4. webmaster :

    Bonjour Francis,

    Il suffit tout simplement de supprimer la fonction demo2() puis d’appeler la fonction initialize2() en lui passant en paramètre les coordonnées en dur.

    Exemple pour un point situé sur Paris :

    var gicons = [];
    var infobulle;
    var markerMember;
    var map = new GMap2(document.getElementById(’mapG2′));
    map.addControl(new GLargeMapControl3D());
    map.addControl(new GMenuMapTypeControl());


    function initialize2(a,b,z){
    map.checkResize();
    gicons[0] = new GIcon(G_DEFAULT_ICON, “http://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);

    infobulle = 'contenu de l\'info bulle';

    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;
    }
    initialize2(48.8566667,2.3509871,10);

    Cordialement,

  5. Francis :

    J’ai trouvé l’erreur
    var map = new GMap2(document.getElementById(’mapG2′));
    au lieu de
    var map = new GMap2(document.getElementById(\’mapG2\’));
    ce sont les apostrophes qui n’allaient pas
    donc ma page s’ouvre aux coordonnées mais je n’ai pas le marqueur
    ni l’infobulle.

  6. webmasteraddress :

    Bonjour Francis,

    L’erreur vient probablement de la déclaration de l’infobulle.
    La variable “address” n’étant plus utilisée, il faut alors l’enlever du contenu de l’infobulle car cela génère une erreur.

    Cordialement,

  7. Intradev :

    Bonjour, je cherche à afficher mon infobulle au chargement de la carte, mais rien à faire.
    Voici mon code :

    OFFICE MAP

    html {
    height: 100%;
    }
    body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    }
    #map_canvas {
    height: 100%;
    }

    function initialize() {
    var latlng = new google.maps.LatLng(39.815475, -105.161468);
    var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: false
    };

    function createMarker(point,html,icon){
    var marker = new GMarker(point,icon);
    marker.openInfoWindowHtml(html);
    return marker;
    }
    var map = new google.maps.Map(
    document.getElementById(”map_canvas”), myOptions);

    var brest = new google.maps.LatLng(39.815475, -105.161468);
    var marker = new google.maps.Marker({
    position: brest,
    title:”Click to view the detail”,
    map: map,
    flat: false
    });

    var InfoWindow = new google.maps.InfoWindow({
    content: “Test”
    });

    }

    Merci d’avance

  8. Pivordi :

    Je souhaiterais installer plusieurs markers … Comment faire s.v.p.

Laisser une réponse

Security Code: