Il n’y a rien de plus frustrant que de passer des jours à designer un site pour finir par tout gâcher avec une carte Google Maps aux couleurs fades et tellement impersonnelles. Ce temps est révolu car maintenant, vous pouvez Personnaliser une carte Google Maps dans WebAcappella Responsive !
Alors bien sur Google propose un éditeur en ligne pour personnaliser vous même une carte, mais cela reste fastidieux même avec la pléthore de tutoriels à ce sujet. C’est pourquoi sur Tonton du Web aujourd’hui, on vous propose beaucoup plus simple. Il existe un site, qui s’appelle : Snazzymap.com dans lequel se trouve pas moins de 2353 styles de Maps différents que vous pouvez utiliser.
Voici comment cela se passe, il vous faut ajouter un code dans un élément “code html” personnaliser ce code et y entrer un style récupéré sur le site Snazzy.com.
Commençons par le code d’intégration de la carte Google Maps :
<head>
<style type="text/css">
#map {
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Carte Google Map Tonton du web
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Options de base de la Google Map
var mapOptions = {
// Zoom au depart sur la carte (obligatoire)
zoom: 13,
// La latitude et longitude pour centrer la carte (obligatoire)
center: new google.maps.LatLng(48.875316, 2.351799), // Paris
// Placez ici le style de map qui vous plait.
styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]
};
// Carte Google Map personnalise Tonton du Web
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(48.875316, 2.351799),
map: map,
title: 'Tonton du Web'
});
}
</script>
</head>
<body>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
</html>
Copiez ce code et ajoutez-le à votre site WebAcappella Responsive, en personnalisant les lignes suivantes :
- Ligne 7 : la hauteur de votre carte
- Ligne 22 : la valeur du zoom
- Ligne 25 : l’endroit où s’ouvre la carte, entrez une latitude et une longitude entre les parenthèses. Indiquez également la ville.
- Ligne 40 : la position du marqueur, entrez une latitude et une longitude entre les parenthèses. Normalement la même qu’en ligne 25
- Ligne 42 : le nom du marqueur
Là, normalement vous devriez avoir une superbe carte Google Maps dans votre site WebAcappella Responsive. Mais il faut encore personnaliser les couleurs !
Allez sur le site Snazzy.com et choisissez un style de carte parmi les 2353 styles proposés ! Une fois votre style choisi, copiez le code JavaScript Style Array en cliquant le bouton “copy”.
Retournez dans le code de votre carte Google Maps à la ligne 26, et remplacez le style existant par celui que vous avez choisi. (pensez à laisser “styles:”)
Et voilà ! Vous savez à présent comment Personnaliser une carte Google Maps dans WebAcappella Responsive.
Si vous aimez personnaliser des GoogleMaps, ce plugin devrait vous plaire : Plugin Double Maps
Des bisous, des poutous, des poutous, des bisous.
Bonjour,
J’ai essayé avec WA Responsive mais la carte reste de dimension fixe.
Comment faire pour la rendre adaptable ?
Cordialement
Ghis
Bonjour Ghis !
Nous venons de faire une mise à jour du code. Maintenant ça fonctionne aussi dans WARC !
Bonjour,
Avez vous une solution pour integrer une carte contenant plusieurs marqueurs.
merci par avance de votre aide.
Bonjour,
maintenant il y a une solution : https://www.tontonduweb.com/templates-et-plugins-webacappella/plugin-double-maps-webacappella-responsive/
limité à deux marqueurs mais c’est déjà ça !
Bonne journée
Bonjour,
d’abord merci pour le travail fourni.
Je suis confronté au problème suivant :
J’ai inséré le code html (fourni par vos soins) dans une sous page (pied de page).
Avant même d’y intégrer le code de la carte snazzymap mais en redéfinissant la latitude et longitude désirée, le niveau de zoom désiré également, la prévisualisation dans l’éditeur de WARC fonctionne parfaitement…les problèmes arrivent après.
1er problème : en cliquant sur “Tester” le mode écran PC fonctionne correctement mais pas pour tablette/smartphone (il n’apparait rien)
2ème problème : une fois publié rien n’est affiché que cela soit un PC ou une tablette. J’ai un message d’erreur à la place de la carte qui me dit: “Petit problème… Une erreur s’est produite
Google Maps ne s’est pas chargé correctement sur cette page. Pour plus d’informations techniques sur cette erreur, veuillez consulter la console JavaScript.”
Pourriez-vous m’aider ?
Merci.
Bonsoir,
Comment faire pour afficher par exemple 3 adresses au même style mais chaque adresse sur une carte différente.
J’ai tenté 3 éléments html en modifiant la lat et long mais cela ne fonctionne pas. Cela n’en affiche qu’une seule.
Ce n’est pas très sérieux de ne pas répondre le mieux est de ne pas faire de blog.
Bonjour Ray,
quelle est la question ?