jump to navigation

Utiliser l’API de Google Maps août 23, 2009

Posted by pixelmed in Tutoriel web.
Tags: , , , , ,
trackback

Google Maps
Un petit tutoriel sur l’utilisation de l’api de Google maps dans un site personnel..

Télécharger la source Site En ligne

Obtenir votre clé personnel

– Cette Étape est importante car la clé de votre site est unique et n’est pas utilisable dans un autre site.
– donc référer vous ici et cliquer sur « Sign up for a Google Maps API key ». accepter les conditions d’utilisation ensuite entrer votre nom de domain et cliquer sur generate key.
– dans la partie « JavaScript Maps API Example » copier votre code qui contiendra votre clé. pour moi c’est

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAgLRXY6hlb2e428atMWLRJRTF54_pgvBtas1GB4seN3MHBMfTZRSNvn3xIeKJvpGX74QDbRsjujz_Tw" type="text/javascript"></script>

Créer le fichier html

– créer un nouveau fichier html et insérer le code suivant avec votre clé biensur :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google API</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAgLRXY6hlb2e428atMWLRJRTF54_pgvBtas1GB4seN3MHBMfTZRSNvn3xIeKJvpGX74QDbRsjujz_Tw" type="text/javascript"></script>
</head>
<body>
<div id='wrap'>
<div id='map'></div>
</div>
</body>
</html>

– pour le css.
#wrap{
width:1000px;
margin:0 auto;
}
#map{
width:800px;
height:300px;
margin:0 100px;
}

– donc pas grand chose seulement un div « wrap pour centrer la page et un div « map » vide pour notre map.

Les fonctions Google Maps

dans la partie «  » insérer le code suivant :

$(function(){ //Quand le Document sera pret
if (GBrowserIsCompatible()) { // Si le navigateur est compatible sinon ne rien faire.
var map = document.getElementById("map"); //Créer une nouvelle variable avec comme valeur l'ID du div "map"
var m = new GMap2(map); // la variable m qui contient une nouvelle map et comme argument la variable précédente
m.setCenter(new GLatLng(35.700565, -0.635004), 11); // Cette fonction et pour centrer la map avec vos coordonée et le zoom "11"
m.addControl(new GSmallMapControl()); // ajouter l'outil de zoom à la map
m.addControl(new GMapTypeControl()); // ajouter l'outil de changement du type de la carte
m.openInfoWindow(m.getCenter(),document.createTextNode("j'habite ici")); // Un petit message
}
});

– ce sont les fonctions de base pour utiliser la map.

Résultat

Télécharger la source Site En ligne

Commentaires»

No comments yet — be the first.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :