Maps API v3 Custom directions markers

by Yamini Sontakke

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="height: 400px; width: 400px"></div>
<script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {

    //directionsDisplay = new google.maps.DirectionsRenderer();

    var center = new google.maps.LatLng(0, 0);

    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: center
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var rendererOptions = {
        map: map,
        suppressMarkers: true
    };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    directionsDisplay.setMap(map);

    var start = new google.maps.LatLng(66.33, 18.05);
    var end = new google.maps.LatLng(59.40, 18.05);


    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            
            var route = response.routes[0].legs[0]; 
            
            createMarker(route.start_location);
            createMarker(route.end_location);

            directionsDisplay.setDirections(response);
        }
    });
}



function createMarker(position) {
    var marker = new google.maps.Marker({
        position: position,
        map: map,
       icon:'http://theonlytutorials.com/demo/x_office_calendar.png'
    });
 
}



initialize()