Google Maps:Guide

Un article de Wiki.

Jump to: navigation, search

Sommaire

1 Introduction
2 Installation
3 Utilisation
4 Tips

[modifier] Introduction

A la découverte du monde... de Google Maps!

[modifier] Installation

L'API de Google Maps est limitée pour un seul utilisateur à une seule URL!

Après, il faut aller dans l'API...

http://www.google.com/apis/maps/documentation/

[modifier] Utilisation

Les premiers tests ne sont pas aussi simples que ça...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbn5YL8Z36CTP03DjneWAXxRFVU1ZGetpuqkvmAHXsYtC_AL9xBSwexFCWYQxLrFe4suyiVsnDkU2uQ"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    var miwa_lat;
    var miwa_lon;
    var miwa_zoom;

    miwa_lat=<?php if ($_GET['lat']) { echo $_GET['lat']; } else { echo "45.0";} ?>;
    miwa_lon=<?php if ($_GET['lon']) { echo $_GET['lon']; } else { echo "0.0";} ?>;
    miwa_zoom=<?php if ($_GET['zoom']) { echo $_GET['zoom']; } else { echo "5";} ?>;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(miwa_lat, miwa_lon), miwa_zoom);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
 
	GEvent.addListener(map, "click", function(marker, point) {
	  if (marker) {
	    map.removeOverlay(marker);
	  } else {
		  var marker = new GMarker(point);
		  map.addOverlay(marker);
		  marker.openInfoWindowHtml("<small><div>lat=" + point.lat() + '</div><div>lon=' + point.lng() + "</div></small>");
		  map.getInfoWindow().hide();
		  map.getInfoWindow().reset(point);
		  map.getInfoWindow().show();
  	}
});

	<?php

	if ($_GET['marker']) {
?>
	var center_marker= new GMarker(new GLatLng(miwa_lat, miwa_lon));
	map.addOverlay(center_marker);	
<?php
	}
	?>

      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 100%; height: 600px; background-color: white;"></div>
  </body>
</html>