• Introduction
• Première Carte
• Les Marqueurs (Markers)
• L'infobulle (Info Window)
• Polygones
• Les couches (couches)

• Service de cartographie en ligne
• Utilise JavaScript
• Customisation de la carte
• Infinité de possibilité avec la dernière version V3
• Limite à 25 000 cartes par jour
  • La politique de prix n'est censée concerner que 0,35 % des sites qui ont recours à l'API
  • Désaffections retentissantes dont Foursquare ou Wikipédia ou Apple

Pour créer une carte, nous devons fournir un emplacement (sur la surface de la Terre), un niveau de zoom, et le type de données à afficher.

• Les emplacements sont spécifiés à l'aide de l'objet google.maps.LatLng
  • latitude (entre -90° et 90°)
  • longitude (entre -180° et 180°)
• Le type de carte à afficher est contrôlée par le paramètre mapTypeId.
  • google.maps.MapTypeId.ROADMAP : affiche la vue de la carte de route par défaut
  • google.maps.MapTypeId.SATELLITE : affiche Google Earth satellite images
  • google.maps.MapTypeId.HYBRID : affiche un mélange de vues normales et satellite
  • google.maps.MapTypeId.TERRAIN : affiche une carte physique sur la base des informations de terrain
• Pour voir les autres options consulter la documentation

			var mapOptions = {
				center: new google.maps.LatLng(37.7831,-122.4039),
				zoom: 12,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			new google.maps.Map(document.getElementById('map'), mapOptions);
		

			<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
			<div id="map"></div>
		

			html, body, #map {
			  height: 100%;
			  margin: 0;
			}
		

  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <div id="map"></div>
  <script type="text/javascript">
    var locations = [[34.742706,10.757933],[34.743799,10.762997],[34.736005,10.761237],[34.739285,10.754628]];
    var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 15,
	center: new google.maps.LatLng(34.739955,10.760057),
	mapTypeControl: true,
	mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
	navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    streetViewControl: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker, i;
	for (i = 0; i < locations.length; i++) {  
	  marker = new google.maps.Marker({
		position: new google.maps.LatLng(locations[i][0], locations[i][1]),
		map: map
	  });
	}
  </script>
		

  <div id="map"></div>
  <script type="text/javascript">
    var mapOptions = {
		center: new google.maps.LatLng(34.840436,10.758061),
		zoom: 17,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
	var icon = new google.maps.MarkerImage(
	  '../images/logo_isims.jpg'
	);	
	var markerOptions = {
		position: new google.maps.LatLng(34.840136,10.756861),
		icon: icon,
		map: map
	};
	var marker = new google.maps.Marker(markerOptions);
	marker.setMap(map);
	var infoWindowOptions = {
		content: 'Institut Supérieur d\'Informatique et Multimédia de Sfax<br />Site Web : <a href="http://www.isimsf.rnu.tn/" target="_blank">http://www.isimsf.rnu.tn/</a>'
	};
	var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
	google.maps.event.addListener(marker,'click',function(e){
	  infoWindow.open(map, marker);
	});
  </script>
		

<div id="map"></div>
<script>
  var myLatLng = new google.maps.LatLng(34.739955,10.760057);
  var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var bermudaTriangle;
  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);
  var triangleCoords = [
      new google.maps.LatLng(34.742706,10.757933),
      new google.maps.LatLng(34.743799,10.762997),
      new google.maps.LatLng(34.736005,10.761237)
  ];
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
</script>
		

		
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather"></script>
<div id="map"></div>
<script>
	var map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(34.739955,10.760057),
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var weatherLayer = new google.maps.weather.WeatherLayer({
		temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
	});
	weatherLayer.setMap(map);
	var cloudLayer = new google.maps.weather.CloudLayer();
	cloudLayer.setMap(map);
</script>