Géolocaliser une carte personnalisée Google Maps

Maintenant qu’il y a des thérapeutes référencés en dehors de Paris sur la carte des thérapeutes, c’est un peu plus intéressant de géolocaliser l’internaute quand il affiche la page. J’imagine bien que si j’habite en Corse, je puisse être un peu agacée que la carte soit zoomée sur Paris 😀

Pour ce besoin, ce n’est pas très compliqué. Les navigateurs récents permettent facilement de récupérer les informations de géolocalisation. La petite difficulté a plus résider dans la localité par défaut quand l’utilisateur refuse d’être géolocalisé. En effet, pour des raisons de sécurité, il n’est visiblement pas possible de rafraichir une iframe une fois que cette dernière a été initialisée.

Au départ, j’ai le code fourni par Google, qui permet d’inclure une carte personnalisée sur une page web :

[pastacode lang= »markup » message= »Code fourni par Google pour une carte personnalisée » highlight= » » provider= »manual »]

<iframe id="carteTherapeutes" width="620" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://maps.google.com/maps/ms?msa=0&msid=215895591333034037838.0004e2709394b2a8bafd6&ie=UTF8&t=m&source=embed&ll=48.862004,2.355194&spn=0.108414,0.219727&output=embed">iframe>

[/pastacode]

Le paramètre ll indique les coordonnées de géocode (longitude et latitude) de l’endroit vers lequel la carte doit zoomer au départ.

Nous récupérons le géocode grâce à la méthode navigator.geolocation.getCurrentPosition() puis construisons la carte en nous basant dessus.

Voici le code complet :

[pastacode lang= »javascript » message= »Code complet » highlight= » » provider= »manual »]


<!-- CARTE : Construction de la carte en zoomant sur la geoloc si elle est dispo. Sinon, sur Paris --> <script> $(document).ready(function() { getLocation(); }); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, // Si l'utilisateur refuse d'être géolocalisé function (error) { $('#carteFrame').html('<iframe id="carteTherapeutes" width="620" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=215895591333034037838.0004e2709394b2a8bafd6&amp;ie=UTF8&amp;t=m&amp;source=embed&amp;ll=48.862004,2.355194&amp;spn=0.108414,0.219727&amp;output=embed"></iframe>'); }); } // Si le navigateur ne sait pas gérer la géolocalisation else { $('#carteFrame').html('<iframe id="carteTherapeutes" width="620" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=215895591333034037838.0004e2709394b2a8bafd6&amp;ie=UTF8&amp;t=m&amp;source=embed&amp;ll=48.862004,2.355194&amp;spn=0.108414,0.219727&amp;output=embed"></iframe>'); } } function showPosition(position) { $('#carteFrame').html('<iframe id="carteTherapeutes" width="620" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=215895591333034037838.0004e2709394b2a8bafd6&amp;ie=UTF8&amp;t=m&amp;ll=' + position.coords.latitude + ',' + position.coords.longitude + '&amp;spn=0.108414,0.219727&amp;z=12&amp;output=embed"></iframe>'); } </script>

[/pastacode]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *