Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • google_maps
web:google_maps

Table des matières

Google Maps API

Pour commencer

  • Obtenir une clé pour Google Maps API
  • Insérer la référence à l'API dans le code du site : 
    <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
    • Mettre sa clé personnelle après key=

JavaScript Maps API Example

...
  // Note: you will need to replace the sensor parameter below with either an explicit true or false value.
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA" type="text/javascript"></script>
...

Maps API for Flash Example

  <maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
    key="ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA"/>

HTTP Service Example

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&oe=utf8\
&sensor=true_or_false&key=ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA

Options

Contrôles de Zoom

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

Type de carte

map.setMapType(G_NORMAL_MAP);
map.setMapType(G_SATELLITE_MAP);
map.setMapType(G_HYBRID_MAP);

Simple carte

<body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
        var map = new GMap2(document.getElementById("map"));
        //zoom levels 0-17+, 0 == world
        map.setCenter(new GLatLng(39.754286, -104.994637), 16);
    </script>
</body>

Avec bulle

var map = new GMap2(document.getElementById("map"));
var etsPoint = new GLatLng(45.495327, -73.563101);
map.setCenter(etsPoint, 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_NORMAL_MAP);
 
//create marker, add to map overlay
var etsMarker = new GMarker(etsPoint);
map.addOverlay(etsMarker);
 
//create Info Window (html)
var etsHtml = '<b>École de technologie supérieure</b>,<br /> endroit où il faut travailler fort.';
etsMarker.openInfoWindowHtml(etsHtml);

Utilisation d'un fichier KML

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
  <Document>
    <name>microbrasseries.kml</name>
    <Placemark>
      <name>L'amère à boire</name>
      <description>Il faut essayer la Cerna Hora, lager d'inspiration tchèque.</description>
      <Point>
        <coordinates>-73.566009,45.516284</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>Dieu du Ciel !</name>
      <description>Péché Mortel, la meilleure bière du pays, Aphrodisiaque, Route des épices, trop de bonnes bières !</description>
      <Point>
        <coordinates>-73.593389,45.522599</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>Le Saint-Bock</name>
      <description>La RIP et la Sacrilège sont à essayer.</description>
      <Point>
        <coordinates>-73.563329,45.515063</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>Le Broue Pub Brouhaha</name>
      <description>Le Broue Pub Brouhaha</description>
      <Point>
        <coordinates>-73.588382,45.542595</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>
  • Nommer le fichier (ex : microbrasseries.kml)
  • Rendre le fichier public, sur un serveur
  • Et entrer l'adresse du fichier dans Google Maps
    • champ de recherche
    • ou directement : http://maps.google.com/maps?f=q&hl=en&q=http://sgariepy.com/files/maps/microbrasseries.kml

Sources

Ressources

Documentation Google

En Java

En JavaScript

web/google_maps.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1