Friday, February 8, 2013

Ajouter un symbol sur une google map

Là je met un petit code qui permet d'ajouter une map google
avec une ptite icone, c'est pas gde choZ mais ça peut être util

C'est simple:

<!-- added July,06th 2013-->
Eh! faut pas oublier ça
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!-- -->
1- laisser un div pour la map google dans notre exemple nous l'appellerons map_canvas
2- Creer un fichier javascript
contenant:


        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(longitude,latitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

(dans ce cas , et puis changez les longitudes et latitudes comme vous voulez)

3- Déclarer un objet image (notre icone)
var imagePgt = 'images/peugeot.png';

4-Ajouter l'icone à la map et dans l'emplacement specifique:

var marker = new google.maps.Marker({
            position: new google.maps.LatLng(longitude, latitude),
            map: map,
            icon: imagePgt
        });

c'est presque fini : voila un exemple entier:

 function initMap() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(33.861293,10.085449),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

        var imagePgt = 'images/peugeot.png';
        
    var pgtMarker1 = new google.maps.Marker({
            position: new google.maps.LatLng(36.733063, 10.320570),
            map: map,
            icon: imagePgt
        });
}
5- appel à la méthode initMap() apres le chargement du doc en cas d'utilisation de jquery, ou bien appel direct à la fonction apres la declaration du div dans le html
 ( <script> initMap(); </script>)

No comments:

Post a Comment