Utilisation de L'api GoogleMap
Modifier

Etapes

  • Allez sur votre compte et accepter les conditions "api google map"
http://code.google.com/apis/maps/
  • Validez et récupérez votre clé
  • Code exemple ci-dessous (code 1)
  • Plus d'infos

Modifier

Afficher une position exacte

Il faut pour cela soit
  • Mettre les coordonnées latitue, longitude dans l'initialisation
  • soit intégrer la fonction showAdress ci dessous
{BR}
 function showAddress(address) {{BR}
      if (geocoder) {{BR}
        geocoder.getLatLng({BR}
          address,{BR}
          function(point) {{BR}
            if (!point) {{BR}
              alert(address + " not found");{BR}
            } else {{BR}
              alert(point);{BR}
              map.setCenter(point, 13);{BR}
              var marker = new GMarker(point);{BR}
              map.addOverlay(marker);{BR}
              marker.openInfoWindowHtml(address);{BR}
            }{BR}
          }{BR}
        );{BR}
      }{BR}


Placez alors un appel via lien ou javascript
via lien : 
{BR}
Adresse 1{BR}

Modifier

Marquer des points

Vous pouvez noter des emplacements sur la carte, code :
{BR}
var point = new GPoint(-83.014734, 40.005403);{BR}
var marker = new GMarker(point);{BR}
map.addOverlay(marker);{BR}

Vous pouvez aussi afficher un texte sur cet emplacement, code :
{BR}
function createInfoMarker(point, address) {{BR}
   var marker = new GMarker(point);{BR}
   GEvent.addListener(marker, "click",{BR}
      function() {{BR}
         marker.openInfoWindowHtml(address);{BR}
      }{BR}
   );{BR}
  return marker;{BR}
}{BR}

Cette fonction affiche le point et l'adresse en info bulle.
Appel : 
{BR}
// Gerlach Hall{BR}
var point = new GPoint(-83.014734, 40.005403);{BR}
address = "Gerlach Hall
2108 Neil Avenue
Columbus, Ohio 43210";{BR}
var marker = createInfoMarker(point, address);{BR}
map.addOverlay(marker);{BR}

Modifier

Ajout du contrôle de zoom

map.addControl(new GLargeMapControl());

Modifier

Autres possibilités

Il est aussi possible
  • Passez d'un point à un autre par animation
  • Afficher différentes vues
{BR}
map.setMapType(G_SATELLITE_MAP); // Vue satelite{BR}
map.setMapType(G_NORMAL_MAP); // Vue carte{BR}
map.setMapType(G_HYBRID_MAP); // Vue mixte

  • Icons spécifiques
  • Tracer des droites
{BR}
var polyline = new GPolyline([{BR}
new GLatLng(48.8581, 2.2944),{BR}
new GLatLng(48.8681, 2.2844){BR}
], "#FF6600", 10);{BR}
map.addOverlay(polyline);{BR}

Modifier

Limites de la version utilisable

  • Maximun de 50 000 requête par 24h.

Modifier

Code 1

{BR}
{BR}
{BR}
  {BR}
    {BR}
    Google Maps JavaScript API Example{BR}
    {BR}
    {BR}
{BR}
    //{BR}
    {BR}
  {BR}
  {BR}
    
{BR}
  
{BR}
{BR}


Points importants