Zoom is too great in google maps api

0
votes

Here is my fiddle . Here i have displayed current location and end location by balloons. And i am trying to put directions between start and end point in the map. In this case no markers for the directions are displayed may be because both shares common location. But the zoom is too great , results in it is not covering start and end point. User have to make double right click to see both start and location.

I have also tried,

    new_boundary = new google.maps.LatLngBounds();
    new_boundary.extend(new google.maps.LatLng(start));
    new_boundary.extend(new google.maps.LatLng(end));
    map.fitBounds(new_boundary);

But it is not working. Whats wrong with my map configuration ?

3
javascriptgoogle-mapsgoogle-maps-api-3

3 Answers

1
votes

your script breaks (at least for me) at this line:

dir=((Math.atan2(z.lng()-a.lng(),z.lat()-a.lat())*180)/Math.PI)+360

take a look at this line:

z=(step.lat_lngs.length)?step.lat_lngs[1]:step.end_point,

for the first step lat_lngs.length is 1 , so step.lat_lngs[1] is undefined, the call of z.lng() fails with "Cannot call method 'lng' of undefined"

Possible fix for that error:

z=(step.lat_lngs.length>1)?step.lat_lngs[step.lat_lngs.length-1]:step.end_point,

Related to the zoom: When you wouldn't have disabled the complete UI you would have seen that the result (zoom ) is correct.

The DirectionsRenderer by default will refresh the viewport of the map so that the complete route is visible. This will be done(the bounds initally set in your script will be discarded).

To have another result(preserve the current viewport, but extend it that also the route is visible), you must:

  1. set the preserveViewPort-option of the DirectionsRenderer to true(default is false)
  2. extend the bounds of the map with the bounds of the route
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.set('preserveViewport',true);
        map.fitBounds(map.getBounds().union(response.routes[0].bounds));

        //continue with your code
0
votes

This code is correct for example

Your map change resolution when you add

 directionsDisplay.setDirections(response);

setDirections(directions:DirectionsResult) None Set the renderer to use the result from the DirectionsService. Setting a valid set of directions in this manner will display the directions on the renderer's designated map and panel.

Hope, that i understand problem right, English i not my native language

0
votes

Try to add validation as

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
 if(!response.routes[0].bounds.getNorthEast().equals(response.routes[0].bounds.getSouthWest())){
                 directionsDisplay.setDirections(response);   
                }
                addDirections(response.routes[0]);
            }
        });

To check if answer contains different point