Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
La GoogleBar est un module de recherche venant s'afficher, par défaut, en bas à gauche de la carte, en lieu et place du logo "Powered By Google".
Elle ressembler à ceci :
Pour afficher la "GoogleBar" sur votre carte nommée "maCarte" il suffit d'utiliser enableGoogleBar() :
Exemple :
maCarte.enableGoogleBar();
Pour masquer la "GoogleBar" sur votre carte nommée "maCarte" il suffit d'utiliser disableGoogleBar() :
Exemple :
maCarte.disableGoogleBar();
Exemple :
Dans la capture d'écran ci-dessous, la carte, dotée de sa GoogleBar est centrée sur la ville de Tours.
En tapant le mot moto dans le champ de recherche, puis en cliquant sur le bouton Rechercher on obtient :
Notez que ce contrôle :
Important :
En cas de clic sur la publicité, si vos paramètres Adsense ne sont pas indiqués dans le paramétrage de la GoogleBar, celle-ci ne vous rapportera aucun revenu.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>Touraineverte.com - GGoogleBar - Insérer une GoogleBar dans une carte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
var maCarte;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte ayant pour nom "maCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "Macarte" est centrée sur la Latitude 47.390251, la Longitude 0.688877, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.390251,0.688877), 13);
/* ... Ajout de l'interface utilisateur (UI) Google Maps à la carte nommée "maCarte" ... */
maCarte.setUIToDefault();
/* ... Affichage de la GoogleBar sur la carte nommée "maCarte" ... */
maCarte.enableGoogleBar();
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Appel de la fonction initialisation() lorsque la page est chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
</head>
<body>
<!-- La <div> ayant pour identifiant id="EmplacementDeMaCarte" fait 100% de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte nommée "maCarte". -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<title>Touraineverte.com - GGoogleBar - Insérer une GoogleBar dans une carte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var maCarte;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte ayant pour nom "maCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "Macarte" est centrée sur la Latitude 47.390251, la Longitude 0.688877, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.390251,0.688877), 13);
/* ... Ajout de l'interface utilisateur Google Maps à la carte nommée "maCarte" ... */
maCarte.setUIToDefault();
/* ... Affichage de la GoogleBar sur la carte nommée "maCarte" ... */
maCarte.enableGoogleBar();
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
//]]>
</script>
</head>
<!-- Au chargement de la page, la fonction initialize() est executée. A la fermeture de la page, la fonction GUnload() est exécutée -->
<body onload="initialize()" onunload="GUnload()">
<!-- La <div> ayant pour identifiant id="EmplacementDeMaCarte" fait 100% de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte nommée "maCarte". -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
</body>
</html>
