Google Maps API V3 : When showing direction zoom is ignored

Question

I have created a map where I need to show the road from Point A to B. So far so good. I have got 2 issues: the 1st one is that the zoom level en center options are ignored and the marker showing Point B appears twice

<div id="map-canvas"></div>

And here is the code:

//set your google maps parameters
    var latitude = -36.33378,
        longitude = -72.25506,
        map_zoom = 11;

    //google map custom marker icon - .png fallback for IE11
    var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;


    //define the basic color of your map, plus a value for saturation and brightness
    var main_color = '#2d313f',
        saturation_value= -20,
        brightness_value= 5;

    //we define here the style of the map
    var style= [ 
        {
            //set saturation for the labels on the map
            elementType: "labels",
            stylers: [
                {saturation: saturation_value}
            ]
        },  
        {   //poi stands for point of interest - don't show these lables on the map 
            featureType: "poi",
            elementType: "labels",
            stylers: [
                {visibility: "off"}
            ]
        },
        {
            //don't show highways lables on the map
            featureType: 'road.highway',
            elementType: 'labels',
            stylers: [
                {visibility: "off"}
            ]
        }, 
        {   
            //don't show local road lables on the map
            featureType: "road.local", 
            elementType: "labels.icon", 
            stylers: [
                {visibility: "off"} 
            ] 
        },
        { 
            //don't show arterial road lables on the map
            featureType: "road.arterial", 
            elementType: "labels.icon", 
            stylers: [
                {visibility: "off"}
            ] 
        },
        {
            //don't show road lables on the map
            featureType: "road",
            elementType: "geometry.stroke",
            stylers: [
                {visibility: "off"}
            ]
        }, 
        //style different elements on the map
        { 
            featureType: "transit", 
            elementType: "geometry.fill", 
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        }, 
        {
            featureType: "poi",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.government",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.sport_complex",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.attraction",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.business",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "transit",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "transit.station",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "landscape",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]

        },
        {
            featureType: "road",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        }, 
        {
            featureType: "water",
            elementType: "geometry",
            stylers: [
                { hue: main_color },
                { visibility: "on" }, 
                { lightness: brightness_value }, 
                { saturation: saturation_value }
            ]
        }
    ];

    var pointA = new google.maps.LatLng(-36.826934, -73.0501711),
        pointB = new google.maps.LatLng(-36.83378, -72.75506)

    //set google map options
    var map_options = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: map_zoom,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        scrollwheel: true,
        styles: style,
    }
    //inizialize the map
    var map = new google.maps.Map(document.getElementById('map-canvas'), map_options);


    directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "Concepción Centro",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "Lomas De Santa Rosa",
            label: "B",

            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

    function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
        directionsService.route({
            origin: pointA,
            destination: pointB,
            avoidTolls: true,
            avoidHighways: false,
            travelMode: google.maps.TravelMode.DRIVING
        }, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    }

See running script here http://jsfiddle.net/Corobori/v7e1m29g/3/

score 2 · Accepted Answer · answered Apr 29 '17 at 06:17

Explanations

the zoom level en center options are ignored because you are using direction service between two points.This will override the map center and zoom. In order to preserve this use preserveViewport
marker showing Point B appears twice this is again due to direction service(travelMode DRIVING) you are using.It will point to place which is most suitable. I think its better to remove marker for pointA and pointB and use marker provided by direction service

updated fiddle

Extract from code

  directionsService = new google.maps.DirectionsService,
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true  //Added to preserve viewport
  }),

Google Maps API V3 : When showing direction zoom is ignored

1 Answers1