Trucs Et Astuces
Comment modifier l'aspect et l'emplacement des mentions de copyright sur une carte.
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.
Lorsque l'on créé une carte de petite taille, on se retrouve, la plupart du temps, avec un copyright qui déborde de la carte, nuisant ainsi à l'esthétique générale de la page. Grâce au CSS il est possible de résoudre ce problème d'affichage.
Lisez : Les conditions générales d'utilisation de Google Maps.
Dans la carte proposée ci-dessous, le copyright "Données cartographiques © 2010 Télé Atlas" est affiché, en haut à droite, en caractères blancs sur fond rouge.
<?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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* 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 nommée "MaCarte" qui s'affichera à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
var MaCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
MaCarte.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
/* 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');
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
<!--
#EmplacementDeMaCarte div span {
position: absolute;
top: -350px;
right: 0px;
padding: 0 5px;
font-size: 12px;
background-color: #f00;
color: #fff;
font-weight: bold;
}
-->
</style>
</head>
<body>
<!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px;"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- 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">
/* 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" ... */
var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
MaCarte.setCenter(new GLatLng(47.341571,0.514233), 13);
/* 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>
<style type="text/css">
<!--
#EmplacementDeMaCarte div span {
position: absolute;
top: -350px;
right: 0px;
padding: 0 5px;
font-size: 12px;
background-color: #f00;
color: #fff;
font-weight: bold;
}
-->
</style>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- La carte nommée "MaCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px;"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
Lorsque votre carte est placée dans une balise <div> ayant pour identifiant EmplacementDeMaCarte (<div id="EmplacementDeMaCarte"></div>) Google insère à l'intérieur de cette <div> du code permettant d'afficher la carte demandée, mais également, le logo, les mentions de copyright et le lien "Conditions d'utilisation".
Ce code n'est pas visible directement dans le code source de la page. Par contre, en utilisant Firebug et Firefox vous allez pouvoir visualiser les lignes suivantes :
<div id="EmplacementDeMaCarte"> ... code inséré par Google (non visible dans le code source de la page, mais visible à l'aide de Firefox + Firebug) ... <div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr"> <span/> <span>Données cartographiques ©2009 Télé Atlas - </span> <a href="http://www.google.com/intl/fr_ALL/help/terms_maps.html" target="_blank" style="color: rgb(119, 119, 204);">Conditions d'utilisation</a> ... code inséré par Google (non visible dans le code source de la page, mais visible à l'aide de Firefox + Firebug) ... </div>
A la lecture du code ci-dessus, on s'aperçoit que :
le copyright "Données cartographiques ©2010 Télé Atlas - " est contenu dans :
Il suffit donc de déclarer, à l'aide de CSS, de nouvelles caractéristiques à la balise <span> .
Exemple (code à placer entre les balises <head></head> ) :
<style type="text/css">
<!--
#EmplacementDeMaCarte div span {
position: absolute;
top: -350px;
right: 0px;
padding: 0 5px;
font-size: 12px;
background-color: #f00;
color: #fff;
font-weight: bold;
}
-->
</style>
