Question

I have the following code which creates a map on a content page.

<script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function init() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(54.6, -4.25);
        var startlatlng = new google.maps.LatLng(50.067, -5.717);
        var endlatlng = new google.maps.LatLng(58.633, -3.067);
        var myOptions = { zoom: 6, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
        calcRoute();
        var marker = new google.maps.Marker({ position: startlatlng, map: map, flat: true, title: "Start" });
        var marker = new google.maps.Marker({ position: endlatlng, map: map, flat: true, title: "Finish" });
        var marker = new google.maps.Marker({ position: new google.maps.LatLng(55.067, -4.717), map: map, flat: true, title: "Start" });
    }

    function calcRoute() {
        var startlatlng = new google.maps.LatLng(50.067, -5.717);
        var endlatlng = new google.maps.LatLng(58.633, -3.067);
        var request = {
            origin: startlatlng,
            destination: endlatlng,
            avoidHighways: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', init);
</script>

All I want is for the route to be displayed on the map created by function init but it is redrawing it at a lower zoom level, almost as if it is ignoring the first map. It is also overwriting my start and end markers. There seems to be very few parameters with directionService to control how the direction line is overlaid. Does anybody understand what is happening, because I don’t?

Answer 1

It seems the way to do this is to add the following at the start of function init():

function init() {
    var rendererOptions = {
        preserveViewport: true
    };
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
}