CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Varshit Kalra
Varshit Kalra

Reputation: 11

how to add a get directions option in a google map

I am trying to add an option for "Get Directions" to my marker which i have added in my website.Location for Amar Urja FIDDLE:https://jsfiddle.net/varshit/9t8pwoa5/

<html>
<div id="map" onload="myMap()"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyC7c1XGzYaMKeKfaHXGU9XumqzgH5PNgkw&callback=myMap"></script>
</html>

<script>
function myMap() {
var uluru = {
    lat: 28.668877,
    lng: 77.424681
};
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 21,
    center: uluru,
});
var marker = new google.maps.Marker({
    position: uluru,
    draggable: true,
    map: map
});
}
</script>

Upvotes: 1

Views: 2500

Answers (1)

acmsohail
acmsohail

Reputation: 1023

Please replace url location id at there. DEMO

HTML

<input type="text" id="routeFrom" name="routeFrom" value="700 n tryon st, charlotte nc" />
<label for="routeFrom">From</label><br />
<input type="text" id="routeTo" name="routeTo" value="Huntersville, NC" />
<label for="routeTo">To</label><br />
<select id="routeMode" name="routeMode">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
    <option value="BICYCLING">Bicycling</option>
    <option value="TRANSIT">Transit</option>
</select>
<label for="routeMode">Mode</label><br />
<div class="textcenter">
    <button id="routeGo">Route</button>
    <button id="routeClear">Clear Route</button>
</div>
<div id="map_canvas"></div>
<div id="directions"></div>

CSS

#map_canvas{
    width: 60%;
    height: 400px;
    border: 1px solid black;
    float: left;
}
#directions {
    width: 38%;
    float: right; 
}
body {
    font-size: 12px;
}

JS

var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
var directionsService = new google.maps.DirectionsService();
var map;

$(window).load(function() {
    var myOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(28.668877, 77.424681)
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));

    $("#routeMode").on("change", function() { calcRoute(); });
    $("#routeGo").on("click", function() { calcRoute(); });
    $("#routeClear").on("click", function() {    directionsDisplay.setDirections({ routes: [] }); });    
});


function calcRoute() {
    var request = {
            origin: $("#routeTo").val(),
        destination: $("#routeFrom").val(),
        travelMode: google.maps.TravelMode[$("#routeMode").val()]
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

Upvotes: 3

Related Questions