Carte google maps

5/5 (8 avis)

Snippet vu 15 400 fois - Téléchargée 18 fois

Contenu du snippet

Voici une carte Google Maps simple, sans prétentions.

Remplacez "METTRE LA CLE GOOGLE MAPS" par votre clé.

Source / Exemple :

<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
    
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
															<title>-Carte GOOGLE MAPS-</title> 
    
    
    <script src="http://maps.google.com/maps?file=api&v=2&key=METTRE LA CLE GOOGLE MAPS" type="text/javascript"></script> 
    
    


    
    
    <script type="text/javascript"> 
    //<![CDATA[ 
  
    var map = null; 
    var geocoder = null; 
  
    function load() { 
    
    

    
    
    
    
    
    
    
    
      if (GBrowserIsCompatible()) { 
        map = new GMap2(document.getElementById("map")); 
	
	
	
	
        map.setCenter(new GLatLng(48.85861640881589, 2.3459243774414062),8);
	map.addControl(new GLargeMapControl()); 
	map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());  //PETITE CARTE EN BAS A DROITE !

	GEvent.addListener(map, "click", function(overlay, point){
	map.clearOverlays();
	if (point) {
	map.addOverlay(new GMarker(point));
	map.panTo(point);
	document.getElementById("mypoint").innerHTML = msg;
	}
	});
	map.enableDoubleClickZoom(); 
        geocoder = new GClientGeocoder(); 
	var polyline = new GPolyline([
new GLatLng(48.8581, 2.2944),
new GLatLng(48.8681, 2.2844)
], "#FF6600", 10);
map.addOverlay(polyline);


      } 
    } 
  
    function afficherAdresse(address) { 
      if (geocoder) { 
        geocoder.getLatLng( 
          address, 
          function(point) { 
            if (!point) { 
              alert(address + " introuvable"); 
            } else { 
              map.setCenter(point, 13); 
              var marker = new GMarker(point); 
              map.addOverlay(marker); 
              marker.openInfoWindowHtml(address); 
            } 
          } 
        ); 
      } 
    } 
    //]]> 
    </script> 
  
  
  </head> 
  
  
  <body onload="load()" onunload="GUnload()" bgcolor="royalblue"> 
  
  
    <form action="#" onsubmit="afficherAdresse(this.address.value); return false"> 
      <div id="map" style="width:1225px; height:775px;"></div> 
      
  
      
      
      
      <p> 
        <input type="text" size="88" name="address" value="70 avenue Pierre Grenier, Boulogne-Billancourt, France" /> 
        <input type="submit" value="Go!" /> 
      </p> 
    </form> 
    
    
    
  </body> 
  
  
</html>

Conclusion :

Merci de laisser vos astuces et vos commentaires !

A voir également

Ajouter un commentaire Commentaires
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
23 avril 2009 à 23:24
j'ai reussi a rater cette source ... super , gràce à toi ma premier google map intégré dans un site en 30 min !!! la prochaine en 5 !! merci
lucifer5 Messages postés 1 Date d'inscription mercredi 27 décembre 2000 Statut Membre Dernière intervention 16 décembre 2008
16 déc. 2008 à 18:51
bonjour est t'il possible d'avoir une navigation identique sur un plan ou une images en jpg de grande taille??
merci d'avance
bibi95150 Messages postés 5 Date d'inscription mercredi 21 novembre 2007 Statut Membre Dernière intervention 27 novembre 2008
27 nov. 2008 à 18:04
Encore une fois bravo le Geek !
lakichemole Messages postés 253 Date d'inscription vendredi 13 juin 2003 Statut Membre Dernière intervention 18 mai 2009
21 nov. 2008 à 10:33
Je me suis fais devancé:)
cs_whoetbe Messages postés 9 Date d'inscription lundi 8 mars 2004 Statut Membre Dernière intervention 21 novembre 2008
21 nov. 2008 à 10:33
Sinon, c'est efficace. Merci
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.