Accueil

20. [Google Maps API v3] Marqueur, événement et devices

Ecrit par fabien le 3/02/2010.
| |



Introduction

L'API Google Maps v3 évolue.
Ce second tutoriel nous montrera les mécanismes mis en jeu pour afficher un marqueur, gérer un événement et optimiser l'affichage sur différents devices.
Le résultat sera d'ailleurs repris dans les tutoriaux sur les Webview sous iPhone et Android.

Initialisation

Comme nous l'avons vu dans le premier tutoriel sur la découverte de cette nouvelle mouture de l'API, la syntaxe est légèrement différente de la version 2. Elle repose désormais sur le concept MVC.
Tout d'abord instancions les variables : 
  var map;
  var myOptions;

Puis initialisons la carte avec la fonction qui sera appelée à l'ouverture de la page :

function initialize() {
 
...    
 
}

Définissons une coordonnées grâce à la classe LatLng

var myLatlng = new google.maps.LatLng(43.5777, 1.40283);

Les options

myOptions =	{
 zoom: 18,
 center: myLatlng,
 disableDefaultUI: true,
 backgroundColor: '#efedbe',
 mapTypeControl: true,
 mapTypeControlOptions: {
   style: google.maps.MapTypeControlStyle.DEFAULT
 },
 navigationControl: true,
 navigationControlOptions: {
   style: google.maps.NavigationControlStyle.DEFAULT
 },
 scaleControl: true,
 scaleControlOptions: {
   position: google.maps.ControlPosition.BOTTOM_LEFT
 },
 mapTypeId: google.maps.MapTypeId.SATELLITE
};

Dans l'ordre :

  • zoom : le niveau de zoom au chargement de la carte,
  • center : le centre de la carte au chargement,
  • backgroundColor : la couleur du fond de carte en attendant les tuiles - couleur hexadécimale - il est pour le moment impossible de définir ses propres tuiles grâce à une URL,
  • mapTypeControl : pour définir ou non les contrôles de la carte
  • mapTypeControlOptions : définition des options contrôle - ici laissé en DEFAULT à l'initialisation,
  • navigationControl : pour définir ou non la navigation de la carte,
  • navigationControlOptions : définition des contrôles de navigation - ici laissé en DEFAULT à l'initialisation,
  • scaleControl : pour définir ou non une échelle,
  • scaleControlOptions : définition de la position de l'échelle - ici en bas à gauche,
  • mapTypeId : le style de carte au chargement - obligatoire.

Il existe de nombreuses autres options que je vous invite à découvrir sur la référence de l'API.

L'appel au constructeur

On définit maintenant la carte en précisant l'ID du div qui la contiendra et en liant les options précédemment définies :

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



Un marqueur et un événement

Définissons un marqueur : 
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: "Marker !"
});

On constate qu'il n'est plus nécessaire comme dans l'API v2 de 'poser' le marqueur sur la carte. C'est fait directement.
On définit donc un titre, une position et la carte sur laquelle sera affiché le marqueur.

Puis on crée une infobulle qui s'affichera lors d'un clic sur le marqueur : 

var infowindow = new google.maps.InfoWindow({
  content: 'Infobulle'
});

Et on ajoute l'événement :

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});



Détection des devices

L'API v3 permet un affichage aussi bien sur les smartphones que sur les ordinateurs de bureau.
Voyons comment détecter le type de machine qui appelle la page Web et comment modifier les options en fonction de ce type.
Déclarons tout d'abord une fonction qui sera appelée à l'ouverture de la page : 
function detectBrowser() {
 
  ...
 
}

Les variables

La détection de la plateforme qui charge la page se fait via la propriété navigator.useragent. Initialisons là et profitons de l'occasion pour déclarer le div qui contiendra la carte - nous pourrons ainsi changer la taille de ce cadre en fonction des devices :

  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

Smartphone ou ordi

Il suffit maintenant de détecter un iPhone ou un Android et ajuster la taille du cadre et modifier un peu les options de la carte définies plus haut et initialisées pour un ordinateur :

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {				
      mapdiv.style.width = '100%';
      mapdiv.style.height = '100%';
      myOptions = {
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ANDROID
        },
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        disableDoubleClickZoom: true,
        scaleControl: false
      };
      map.setOptions(myOptions);
    } else {
      mapdiv.style.width = '550px';
      mapdiv.style.height = '350px';
    }
  }

Si il s'agit d'un smartphone, nous affichons la carte en pleine page - ie. height et width à 100%, nous modifions les contrôles de carte - sélection du type de vue dans un menu déroulant et affichage de deux boutons de zoom au 'style' Android, nous désactivons le zoom en double-cliquant et nous enlevons l'échelle.
Si il s'agit d'un ordinateur de bureau, nous définissons simplement la taille du cadre - ici 550px et 350px (parce que ça rentre pile-poil dans la démonstration (cf. sous le code complet)).


Et un peu d'HTML

Il faut définir maintenant le div qui contiendra la carte et appeler les deux fonctions lors du chargement de la page : 
<body style="margin:0px; padding:0px;" onload="initialize(); detectBrowser();">
  <div id="map_canvas"></div>
</body>

Vous voilà parés pour 'fabriquer' des cartes sur des smartphones et des ordinateurs de bureau sans avoir à faire deux pages différentes.


Code complet

<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>[Google Maps API v3] 20. Construction d'une carte pour desktops et smartphones</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  var map;
  var myOptions;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.5777, 1.40283);
    myOptions =	{
      zoom: 18,
      center: myLatlng,
      disableDefaultUI: true,
      backgroundColor: '#efedbe',
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DEFAULT
      },
      navigationControl: true,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.DEFAULT
      },
      scaleControl: true,
      scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
      },
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "Marker !"
    });
    var infowindow = new google.maps.InfoWindow({
      content: 'Infobulle'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
 
  }
 
  function detectBrowser() {
    var useragent = navigator.userAgent;
    var mapdiv = document.getElementById("map_canvas");
 
    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {				
      mapdiv.style.width = '100%';
      mapdiv.style.height = '100%';
      myOptions = {
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.ANDROID
        },
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        disableDoubleClickZoom: true,
        scaleControl: false
      };
      map.setOptions(myOptions);
    } else {
      mapdiv.style.width = '550px';
      mapdiv.style.height = '350px';
    }
  }
 
  </script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize(); detectBrowser();">
  <div id="map_canvas"></div>
</body>
</html>



Démonstration

A tester également sur votre smartphone !

Pour ceux qui n'ont pas de smartphone, voici une capture du rendu - vous noterez les différences de navigation et de contrôle :




Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference v3 pour les différentes classes, méthodes et options utilisées.
Je vous conseille également la lecture des exemples et des articles.

Conclusion

Cette nouvelle API permet d'afficher des cartes sur un ordinateur de bureau ou sur un smartphone.
Elle évolue vite. Le résultat de ce tutoriel sera utilisé dans les tutoriaux d'explication des webview sous iPhone et Android.


Auteur : Fabien - fabien.goblet [ at ] gmail.com





Retour en haut

Bonjour, Je suis en train

Par NicoNov (non vérifié), le mar, 29/11/2011 - 6:20pm.

Bonjour,

Je suis en train d'intégrer une Google Map V3 sur un site et je cherche à faire en sorte que l'infobulle s'ouvre au chargement de la carte (et non pas au clic).
Comment puis-je faire ? Auriez-vous une idée ?

Dans l'attente de votre réponse,

Cdlt.

Bonjour à tous Tout d'abord

Par Michel (non vérifié), le mer, 01/06/2011 - 1:45pm.

Bonjour à tous

Tout d'abord un grand merci à l'auteur de ce tuto, pour son efficacité, ça clarté et ça simplicité. Merci aussi aux auteurs des différents commentaires, ces derniers mon permis d'avancer dans mon projet, en complément du tuto de base.

J'en suis à l'étape du style de l'infobulle et des marqueurs. (Je suis Web-designer à la base, donc ça m'intéresse un peu plus :) ).
Je ne suis pas certain d'avoir trouvé comment styliser chacune de mes infobulles, et de styliser par conséquent chacun de mes marqueurs.

Quelqu'un pourrait m'aider?

Merci
Michel

Bonjour, merci pour vos

Par fabien, le mer, 01/06/2011 - 5:33pm.

Bonjour,
merci pour vos encouragements :)
La personnalisation des infobulles n'est pas évidente au premier coup. Soit on met du HTML dans l'infobulle mais ça ne modifiera que l'intérieur de celle-ci. Soit on passe par la classe InfoBox - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/d... - qui étend la classe Overview.
J'en ai fait une application sur ce site : http://www.ibiclou.com (sur PC et smartphone).

Fabien

Bonjour Fabien Merci pour les

Par Michel (non vérifié), le mar, 07/06/2011 - 9:47am.

Bonjour Fabien

Merci pour les infos, mais entre temps, j'ai essayé d'avancer et j'ai réussi à entièrement personnaliser mon infoBulle, sauf la petite croix.... :)

Voici mon code avec ajout et personnalisation de marqueur, ainsi que de l'infoBulle. Pour l'exemple, j'ai mis 2 marqueurs.

 /* marker Relais de la Poste */
	var myLatlng1 = new google.maps.LatLng(48.6609549, 7.8231501);
    var contenuRelais = '<div id="relais" class="infoContent">' +
 
					'<div style="border:solid 1px #fff; overflow:hidden; display:block; width:330px;">'+
						'<div class="infoImage"><a href="http://www.carreprivileges.com/index.php?option=com_content&view=article&id=22&Itemid=3" title="Le Relais de la Poste" border="0"><img src="http://www.carreprivileges.com/templates/carre_privileges/images/marker/relais.jpg" title="Le Relais de la Poste" width="155px" height="123px" border="0"/></a></div>' +
						'<h2 class="infoTitle">Le Relais de la Poste</h2>'+
						'<div class="infoText">'+
						'03 88 59 24 80<br />'+
						'21, rue du Gal de Gaulle <br />'+ ' 67610 LA WANTZENAU<br />' +
						'<a href="http://www.relais-poste.com/" title="Le Relais de la Poste" target="_blank" class="infoLink">www.relais-poste.com</a><br /><br />'+
						'<a href="http://www.carreprivileges.com/index.php?option=com_content&view=article&id=22&Itemid=3" title="Le Relais de la Poste" class="infoLink">voir la fiche de l\'h&ocirc;tel</a></div>'+
						'</div>'+
					 '</div>'+
 
  '</div>';
	var icon = new google.maps.MarkerImage ("http://www.carreprivileges.com/templates/carre_privileges/images/marker/marker01.png");
	var marker1 = new google.maps.Marker({
      icon: icon,
	  position: myLatlng1,
      map: map,
	  title: "Le Relais de la Poste !"
    });
    var infowindow1 = new google.maps.InfoWindow({
      // maxWidth :80,
	  content: contenuRelais
    });
    google.maps.event.addListener(marker1, 'click', function() {
      infowindow1.open(map, marker1);
    });
 
 
	 /* marker Regent Petite France */
	var myLatlng2 = new google.maps.LatLng(48.5805210, 7.7419101);
	 var contenuRegent = '<div id="regent" class="infoContent">' +
               		'<div style="border:solid 1px #fff; overflow:hidden; display:block; width:330px;">'+
						'<div class="infoImage"><a href="http://www.carreprivileges.com/index.php?option=com_content&view=article&id=31&Itemid=3" title="Le Regent Petite France" border="0"><img src="http://www.carreprivileges.com/templates/carre_privileges/images/marker/regent.jpg" title="Le Regent Petite France" border="0" width="155px" height="123px" /></a></div>' +
						'<div id="texteInfoBulle" class="infoText">'+
						'<h2 class="infoTitle">Le Regent Petite France</h2>' +
						'03 88 76 43 43<br />'+
						'5 rue des Moulins<br />'+ '67000 STRASBOURG<br />' +
						'<a href="http://www.regent-hotels.com/" title="Le Regent Petite France" target="_blank" class="infoLink">www.regent-hotels.com</a><br /><br />'+
						'<a href="http://www.carreprivileges.com/index.php?option=com_content&view=article&id=31&Itemid=3" title="Le Regent Petite France" class="infoLink">voir la fiche de l\'h&ocirc;tel</a>'+
						'</div>'+
					 '</div>'+
 
  '</div>';
    var icon = new google.maps.MarkerImage ("http://www.carreprivileges.com/templates/carre_privileges/images/marker/marker01.png");
	var marker2 = new google.maps.Marker({
      icon : icon,
	  position: myLatlng2,
      map: map,
      title: "Le Regent Petite France !"
    });
    var infowindow2 = new google.maps.InfoWindow({
     // maxWidth :80,
	  content: contenuRegent
    });
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map, marker2);
    });

J'espère que ça pourra aider.
A bientôt

Michel

Problème résolu: <!DOCTYPE

Par Vincent (non vérifié), le sam, 19/03/2011 - 12:42pm.

Problème résolu:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
function createXmlHttpRequest() {
	try {
		if (typeof ActiveXObject != 'undefined') {
			return new ActiveXObject('Microsoft.XMLHTTP');
		} else if (window["XMLHttpRequest"]) {
			return new XMLHttpRequest();
		}
	} catch (e) {
		changeStatus(e);
	}
	return null;
};
 
function downloadUrl(url, callback) {
	var status = -1;
	var request = createXmlHttpRequest();
	if (!request) {
		return false;
	}
 
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			try {
				status = request.status;
			} catch (e) {
			}
			if (status == 200) {
				callback(request.responseText, request.status);
				request.onreadystatechange = function() {};
			}
		}
	}
	request.open('GET', url, true);
	try {
		request.send(null);
	} catch (e) {
		changeStatus(e);
	}
};
 
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }
 
  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
 
  return createElement('div', null);
}
 
 var map;
 
 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 
  downloadUrl("getPoi.php", function(data) { 
 
   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
 
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
   }
  });
 
 }
 
 function createMarker(lat, lng, titre, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });
 
  var infobulle = new google.maps.InfoWindow({
   content: titre
  });
 
google.maps.event.addListener(marker, 'click', function(event) {
$('#content_map').html(<?php echo 'description' ?>);
   infobulle.open(map, marker);
});
 
 }
 
</script>
</head>
<body onload="initialize()">
 <div id="page">
 <div id="dpt">
 contenu left
 </div>
 <div id="map_canvas"></div>
 <div id="content_map">
Détails
 </div>
 </div>
</body>
</html>

Exactement ce que je

Par CroscosyHoark (non vérifié), le ven, 29/07/2011 - 3:33pm.

Exactement ce que je cherchais, merci

Bonjour, voilà plusieurs

Par Vincent (non vérifié), le mer, 16/03/2011 - 7:19pm.

Bonjour, voilà plusieurs jours que je cherche à reproduire l'exemple suivant : (http://www.dougv.com/demo/ajax_google_maps_detaildiv/) mais avec la version 3 de l'api google maps. J'ai acheté le livre "Développer avec les API Google Maps" grâce auquel j'ai pu réaliser une application avec back office pour insérer de nouveaux points dans un bdd Mysql, mais honnêtement je sèche complétement sur cette fonction. Merci par avance de votre aide. Vincent

Je vous laisse mon index.php au passage:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="admin/style.css" />
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
function createXmlHttpRequest() {
	try {
		if (typeof ActiveXObject != 'undefined') {
			return new ActiveXObject('Microsoft.XMLHTTP');
		} else if (window["XMLHttpRequest"]) {
			return new XMLHttpRequest();
		}
	} catch (e) {
		changeStatus(e);
	}
	return null;
};
 
function downloadUrl(url, callback) {
	var status = -1;
	var request = createXmlHttpRequest();
	if (!request) {
		return false;
	}
 
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			try {
				status = request.status;
			} catch (e) {
			}
			if (status == 200) {
				callback(request.responseText, request.status);
				request.onreadystatechange = function() {};
			}
		}
	}
	request.open('GET', url, true);
	try {
		request.send(null);
	} catch (e) {
		changeStatus(e);
	}
};
 
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }
 
  if (typeof DOMParser != 'undefined') { 
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
 
  return createElement('div', null);
}
 
 var map;
 
 function initialize() {
  var latlng = new google.maps.LatLng(46.7, 2.5);
  var myOptions = {
   zoom: 5,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 
  downloadUrl("getPoi.php", function(data) { 
 
   var xml = xmlParse(data);
   var markers = xml.documentElement.getElementsByTagName("marker");
 
   for (var i = 0; i < markers.length; i++) {
    createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'), markers[i].getAttribute('description'));
   }
  });
 
 }
 
 function createMarker(lat, lng, titre, description){
  var latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: titre
  });
 
  var infobulle = new google.maps.InfoWindow({
   content: description
  });
 
  google.maps.event.addListener(marker, 'click', function(){
   infobulle.open(map, marker);
  });
 
 }
 
</script>
</head>
<body onload="initialize()">
 <div id="page">
 <div id="dpt">
 contenu left
 </div>
 <div id="map_canvas"></div>
 <div id="content_map">
Ici le contenu dynamique doit apparaitre
 </div>
 </div>
</body>
</html>

Problème résolu

Par Vincent (non vérifié), le sam, 19/03/2011 - 7:43pm.

Problème résolu (http://georezo.net/forum/viewtopic.php?pid=187960#p187960)

Bonjour, Contrairement à la

Par BenjaminM (non vérifié), le ven, 25/06/2010 - 4:35pm.

Bonjour,

Contrairement à la v2, je n'arrive pas à initialiser proprement la taille de la carte si celle-ci est en display:none;
L'API de Google doit probablement récupérer les dimensions sans tenir compte de celles indiquées.

Du coup, je n'ai pas pu faire apparaître une carte préalablement en display:none car seul un tile de la carte est affiché (malgré les tailles indiqués dans le JS et/ou CSS). Parmi les solutions, la faire apparaitre puis disparaitre ou encore utiliser un autre positionnement (hors écran, z-index inférieur...), mais c'est du petit bricolage.

Une idée ? Merci.

Bonjour, tiens je n'avais pas

Par fabien, le ven, 25/06/2010 - 6:29pm.

Bonjour,
tiens je n'avais pas jamais essayé d'initialiser une carte en display:none;
Donc pas d'idée pour le moment, je vais regarder.

Fabien

En anglais : de Pamela

Par fabien, le ven, 25/06/2010 - 6:37pm.

En anglais :
de Pamela (Google Employee) :

"The API uses the size (offsetWidth/offsetHeight) of the DIV to figure
out how to load tiles and controls into it, so it depends on the size
that is reported when display is none. I just did a test, and as I
suspected, it reports 0 and 0. When setting the visibility property,
this is not the case.

It's possible we can come up with a way to support display-none, but
if it possible to achieve what you are trying to do using the
visibility property, then that will keep our API simpler. "

cf. http://groups.google.fr/group/google-maps-js-api-v3/browse_thread/thread...

Bonjour, J'avais effectué des

Par Laurentb0204 (non vérifié), le lun, 03/05/2010 - 7:24pm.

Bonjour,

J'avais effectué des developpelements sur la version v2, je suis en train de "migrer" mon code dans la v3, je rencontre certaines difficultés donc je ne trouve pas la réponse.
Par exemple, j'essaie de recuperer la coordonnée du point de la carte de mon event clic, mais je n'y arrive. La manière de faire a changée. Je fais un truc comme ca :
google.maps.event.addListener(map, 'click', function(point)
{
alert(point);
});

Si quelqu'un a une idée?
Merci d'avance,

Bonsoir, je pense qu'un truc

Par fabien, le mar, 04/05/2010 - 7:38pm.

Bonsoir,
je pense qu'un truc du style devrait faire l'affaire :

google.maps.event.addListener(map, 'click', function(event) {  
  var latlong = event.latLng;
  var lat = latlong.lat();
  var long = latlong.lng();
  alert(lat+' - '+lng);
});

Bonjour ! Je découvre avec

Par korr (non vérifié), le jeu, 11/03/2010 - 1:33am.

Bonjour !

Je découvre avec bcp de plaisir ce tuto ! j'utilisais l'autre méthode avec les key, mais trop de soucis....j'aimerais retrouver le meme resultat qu'avant
d'ou deux questions, comment changer l'icone d'un marqueur et son ombre
et comment faire pour que l'infobulle de ce seul et unique marqueur, soit ouvert dés le départ ?

Par avance, grand merci à vous !!!

Bonjour, Merci pour les

Par Planeteeco (non vérifié), le mer, 24/02/2010 - 11:44pm.

Bonjour,
Merci pour les informations. Je comprends mieux, et j'ai réalisé ma première carte.
J'ai réussi à placer un point avec son infobulle. J'ai réussi à placer une polyligne.
Mais je n'arrive pas à placer un second point (avec une autre infobulle).
C'est sans doute tout bête !?...
Pouvez-vous m'éclairer ? A quel endroit, et quel code utiliser ?
Merci pour votre aide.

Bonjour, en effet c'est

Par fabien, le ven, 26/02/2010 - 1:44pm.

Bonjour,
en effet c'est facile : il suffit de déclarer un second marqueur.

var marker2 = new google.maps.Marker({
  position: myLatlng2,
  map: map,
  title: "Marker 2!"
});

Il faut non seulement

Par Michel (non vérifié), le mer, 01/06/2011 - 1:53pm.

Il faut non seulement déclarer un second marqueur, comme l'a indiqué Fabien, mais aussi déclarer et appeler une seconde infobulle comme suit : 

var infowindow2 = new google.maps.InfoWindow({
      content: '2eme Titre'
    });
    google.maps.event.addListener(marker2, 'click', function() {
      infowindow2.open(map, marker2);
    });

Merci pour la réponse. Je

Par Anonymous (non vérifié), le lun, 01/03/2010 - 12:10am.

Merci pour la réponse.
Je continue à avancer dans ma carte !

Bonjour, Tutoriel

Par Loutre (non vérifié), le mar, 16/03/2010 - 12:07pm.

Bonjour,

Tutoriel indispensable pour débuter. Mais avez-vous une réponse a cette question ?

http://georezo.net/forum/viewtopic.php?pid=162005#p162005

Bonjour, tout dépend de

Par fabien, le mar, 16/03/2010 - 2:07pm.

Bonjour,
tout dépend de quelle API vous parlez ? La 2 ou la 3. Il me semble que la classe GXml n'a pas encore été implémentée dans la dernière version.
Il faudra donc passer par l'API v2 : ce tuto devrait vous être utile.
J'ai bien lu hier vos questions sur les ForumSIG et GeoRezo.

Donc pour l'affichage de POI provenant d'une base de données, vous avez votre réponse.
Pour le sens inverse, alimentation de la base avec la carte, je vous propose d'y aller progressivement : afficher un marqueur déplaçable sur la carte et afficher les coordonnées de ce marqueur dans un coin de la page lorsque vous le déplacez. Il suffira d'un bouton 'Envoyer' qui enverra les données (lat, long + tout ce que vous voulez provenant d'un formulaire) vers le serveur.

Cordialement,
Fabien.