Make polyline to show on google map horizontally and zoom it to center coordinate

Question

I am using Google Maps API JavaScript. My use case is I need to plot coordinates (lat, lng) on maps (create markers) and join them through polyline. The co-ordinates will be very close to each other so when I try to plot them, they get hidden behind the first marker. So I find out the center and try to zoom so that all markers will be visible on the map. I used bounds to find the center but I am not able to zoom it to center co-ordinate. I used map.fitBounds(latlng); It fits the coordinate on the screen. But what I want to achieve is to make polyline (connecting all co-ordinate) always horizontal and zoom it to center co-ordinate.

enter code herevar bounds = new google.maps.LatLngBounds();

for (i = 0; i < temp.length; i++) {
   bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);

As the coordinate will always be different, The polyline will be in any direction, but I always want to show it horizontally on the map. what I get : enter image description here

what i want to acheive:

enter image description here

Any suggestion will be appreciated. Thanks in Advance.

score 0 · Accepted Answer · answered Nov 23 '21 at 06:38

I achieve something like this by using the following:

Use computeHeading() function of Geometry library to get the angle from your first to your last coordinate on the line. Make sure to add &libraries=geometry to your Maps JS script tag.
Once you get the heading, you can use the map.setHeading() function to change the angle of your view and after some testings,I can see that you can achieve the horizontal view by subtracting it to 90 degrees.

Here's the sample code and code snippet below:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.756795,
      lng: -73.954298
    },
    zoom: 16,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });


//array of your points
 const markerCoordinates = [
   { lat: 40.758481, lng: -73.958269 },
    { lat:40.754649, lng: -73.949563 },
   
  ];
    
    //creating marker from your points
  for (let i = 0; i < markerCoordinates.length; i++) {
    const marker = markerCoordinates[i];

    new google.maps.Marker({
      position:marker,
      map,
    });
  }
   
   //creating polyline from your points
  const createdPolyline = new google.maps.Polyline({
    path: markerCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  createdPolyline.setMap(map);
  
  //get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
    markerCoordinates[0],
    markerCoordinates[1]
  )
    
//once you get the heading subtract it by 90 to get a horizontal view
   map.setHeading(heading-90)
}

Make polyline to show on google map horizontally and zoom it to center coordinate

1 Answers1