Google Map Direction using data from mysql

Question

how to make direction on google maps? im very new on google maps. i have tried tutorial on google developers but it use Places Library when it make directions. but my problem is i have two point, for example point A and B. Point A and B have Latitude and longitude that stored in mysql. how can i make direction from 2 points (point A & B) that stored langtitude and longtitude on mysql? Thanks.

Answer 1

The linked tutorial doesn't use the places-library.

When you want to use fix latitude & longitudes fetch them from the DB , create google.maps.LatLng's (or LatLngLiterals) based on the values and use it as origin and destination.

Example(assuming you create 4 PHP-variables $point_a_lat, $point_a_lng, $point_b_lat, $point_b_lng )

function initMap() {
  var directionsService = new google.maps.DirectionsService;
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {lat: 41.85, lng: -87.65}
      }),
      directionsDisplay = new google.maps.DirectionsRenderer({map:map}),
      displayRoute=function(origin,destination){
          directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
            }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                } else {
                  alert('Directions request failed due to ' + status);
                }
               });
      };
      
      displayRoute(
        { 
          //lat:<?php echo $point_a_lat;?>,
          //lng:<?php echo $point_a_lng;?>,
          lat:52.52, 
          lng:13.40
        },
        { //lat:<?php echo $point_b_lat;?>,
          //lng:<?php echo $point_b_lng;?>,
          lat: 48.85, 
          lng: 2.35
        }
      );
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"
        async defer></script>