Google Maps - Itinéraire et distance

Signaler
Messages postés
1
Date d'inscription
samedi 17 octobre 2020
Statut
Membre
Dernière intervention
20 octobre 2020
-
Bonjour, je suis en train de monter un site et y ajouter quelques fonctions pour cela j'aimerais trouver des codes source pour.
Exemple: le point (A) représente l'utilisateur
Le point (B) représente mon adresse bureau
ce que je cherche est que lorsque l'utilisateur clique sur le bouton (localiser), automatiquement le point (A) soit localisé par rapport au point (B) tout en montrant au point (A) quel chemin prendre et quel est la distance a parcourir tout cela avec google maps.
de ma part j'ai trouver quelques codes source que j'ai testés.

<html>
    <head>
        
       <style type="text/css">
            #map   {
                 width: 50%;
                 height: 300px;
            }
        </style>
        
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        
        <script type="text/javascript">
            // Carte Google Map 
            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: 10,
 
                    // La latitude et longitude pour centrer la carte (obligatoire)
                    center: new google.maps.LatLng(33.4073896, 2.77813), // Alger
 
                    // 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(33.273075, 3.194862),
                    map: map,
                    title: 'ٌreg'
                });
            }
        </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>