J’ai décidé de créer ce billet pour aider certains d’entre vous à utiliser la nouvelle API Googlemaps V3.
Rappelons que l’ancienne version de l’Api nécessitait une clef pour fonctionner et cette clé était valable uniquement pour un nom de domaine, ce n’est plus le cas aujourd’hui.
Initialisation de la carte
Pour commencer, partons d’une structure de base html comme ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Maps Api v3</title>
</head>
<style type="text/css">
#container{position:relative;width:990px;margin:auto;}
#container #map{width:500px;height:500px;margin:auto;}
</style>
<body>
<div id="container">
<div id="map">
<p>Veuillez patienter pendant le chargement de la carte...</p>
</div>
</div>
<!-- Include Javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/functions.js"></script>
</body>
</html>
Quelques explications sur la structure :
La div portant l’identifiant map sera le conteneur de notre carte, le message présent dans cette div sera donc effacé lorsque la carte sera chargée.
Nous incluons l’Api Googlemap et un fichier appelé functions.js dans lequel nous allons initialiser notre carte.
Voici notre fichier function.js
var map;
var initialize;
initialize = function(){
var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
var myOptions = {
zoom : 14,
center : latLng,
mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
};
initialize();
Placer un point sur la carte
Nous venons donc d’initialiser notre carte sur Lille, simple n’est-ce pas ?
Maintenant peut-être souhaitez-vous placer un point sur cette carte ? Et bien voici comment faire
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "Lille"
//icon : "marker_lille.gif"
});
Il faut impérativement créer le marqueur après l’initialisation de la carte pour préciser au marqueur la carte sur laquelle il doit s’afficher. Voir l’exemple ci-dessous
initialize = function(){
var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
var myOptions = {
zoom : 14, // Zoom par défaut
center : latLng, // Coordonnées de départ de la carte de type latLng
mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "Lille"
//icon : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
});
};
Créer une info-bulle
Vous voilà maintenant avec votre carte et votre premier point, vous remarquerez que rien ne se passe lorsque vous cliquez sur le point, voici comment afficher une info-bulle
var contentMarker = 'Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="http://www.google.fr">google</a> sit amet mauris.'
var infoWindow = new google.maps.InfoWindow({
content : contentMarker,
position : latLng
});
Nous venons de définir l’info-bulle et son contenu, il ne reste plus qu’à définir un listener
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
Et le tour est joué !
Créer une tabulation dans une info-bulle
Auparavant, avec l’Api v2 de Googlemaps, il était possible d’obtenir des tabulations dans les info-bulles, dorénavant celà n’est plus possible, l’une des solutions possibles consiste à créer la tabulation soit-même en javascript.
Je vous propose donc de passer par jQuery où toute autre librairie de votre choix pour la réalisation de la tabulation.
Pour ma part, je choisis Jquery.
Voici un exemple ci-dessous.
var contentString = [
'<div id="containerTabs">',
'<div id="tabs">',
'<ul>',
'<li><a href="#tab-1"><span>Lorem</span></a></li>',
'<li><a href="#tab-2"><span>Ipsum</span></a></li>',
'<li><a href="#tab-3"><span>Dolor</span></a></li>',
'</ul>',
'<div id="tab-1">',
'<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="http://www.google.fr">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-2">',
'<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-3">',
'<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
'</div>',
'</div>',
'</div>'
].join('');
google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle
jQuery("#tabs").tabs();
});
Il faudra biensûr ne pas oublier de télécharger et d’inclure jQuery Ui disponible ici http://jqueryui.com/download
Pour la démonstration c’est ici,
et ça se passe là pour les sources.
Ce billet vous a plus ? N’hésitez pas à laisser un commentaire, c’est toujours encourageant.
Super intéressant ce tuto !
Je cherche un moyen d’avoir plusieurs points accompagnés de leurs bulles sur la carte… mais du coup je galère à les déclarer dans le code…
Aurais-tu un exemple avec 2 points sur la carte ?
Merci
Salut Jérémie, oui voici un exemple avec deux points
var marker1;
var marker2;
var latLngMarker1 = new google.maps.LatLng(’50.62925′,’3.057256000000052′);
var latLngMarker2 = new google.maps.LatLng(’50.6283955′,’3.0520400000000336′);
var contentStringMarker1 = ‘Lille’;
var contentStringMarker2 = ‘rue Léon Gambetta Lille’;
var infoWindowMarker1 = new google.maps.InfoWindow({
content : contentStringMarker1,
position : latLngMarker1
});
var infoWindowMarker2 = new google.maps.InfoWindow({
content : contentStringMarker2,
position : latLngMarker2
});
google.maps.event.addListener(marker1, \’click\’, function() {
infoWindowMarker1.open(map,marker1);
});
google.maps.event.addListener(marker2, \’click\’, function() {
infoWindowMarker2.open(map,marker2);
});
Et voilà le tour est joué, idéalement tu peux imaginer une boucle PHP qui génère le code ci-dessus en remplaçant le numéro dans le nom du marqueur, latLng…etc par l’identifiant du point.
Super !
Merci beaucoup pour ta réponse ! je teste çà et je posterai le résultat final !
Whouhaaa génial ce tuto!!!
Je pense m’en servir très prochainement… Merci shatimes :D
bonjour, et merci pour ce tuto…
Ce que je recherche, c’est d’apprendre via un tuto pour placer des adresses stockées dans ma base de données et les placer sur ma carte Google V3
cordialement
gilles
Bonjour,
Il suffit de regarder l’exemple ci-dessus avec deux points, il faut simplement imbriqué le code dans la boucle de vos points et nommer de manière dynamique les variables.
[...] article est la suite logique de ce précédent billet sur la découverte de l’API Google Maps V3. Nous repartirons donc de l’archive [...]
Bonjour,
Merci beaucoup pour ce tuto ça m’a beaucoup aidé !
Avez vous une idée comment je pourrais localiser des tablettes à partir leurs adresses IP et afficher leurs localisation sur une carte ?
Salut,
Tant mieux si le tuto t’aide c’est le but :-D
Je trouve ta question très intéressante, je vais y consacrer
un tutoriel ces prochains jours.
A bientôt
Bravo pour ce tuto … une vraie aide et un vrai gain de temps lorsqu’on debut sur google map …
Par contre, plutot que lat et long, ca serait cool d’avoir le tuto pour localiser quelque chose de plus naturel : une adresse : 25, avue de la Paix, Paris, France
Si vous avez 3 minutes de libre ;-)
Bonjour,
auriez vous un exemple de google maps Api V3 en PHP avec utilisation des marqueurs. En effet je galère à insérer des marqueurs en PHP, cela ne fonctionne pas. J’utilise du PHP car je travaille avec une base de données MySQL.
Par avance Merci
Denis
un seul mot : BRAVO
Super le tuto. J’ai regretté d’avoir perdu mon temps a lire des tutos sur Google Map en anglais.
Et merci aussi pour les liens