GoogleMaps API to Draw a line From A to B Direction

July 18, 2016July 18, 2016 Arjun JS Googel Direction, Google, javascript, maps

To make Google maps API to Draw a line From One Place to Another Direction.

Step1: Add the below Google maps API link to your page

1	`<script` `type="text/javascript"` `src="http://maps.google.com/maps/api/js?sensor=false"></script>`

Step 2: Add the below HTML Div to body

<div style="width: 600px;">
        <div id="map" style="width: 800px; height: 600px; float: left;"></div>
      </div>

Step 3: Then you have to configure Javascript code based on your Requirement.

var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
    
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        directionsDisplay.setMap(map);
    
        var request = {
          origin: '13.315616, 75.774851', 
          destination: '12.971606, 77.592682',
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
    
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });

Arjun JS

Arjun is a Full-stack developer, who is fond of the web. Lives in Chikmagalur, Karnataka, India

Also Read: Google API to Calculate a Distance in PHP / Mysql

Related posts