Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps for iOS, swift - How to show entire polyline between markers?

I am trying to fit a polyline in the google map view. The polyline was acquired through overview_polyline in the google maps directions api.

Wondering how I would be able to convert an encoded polyline into something that can be worked with. I need to fit the polyline in the map view. All i have found out to do is fit the bounds to show all markers but not showcase the entire polyline.

func fitAllMarkers()
{

    var bounds = GMSCoordinateBounds()

    for marker in markers
    {
        bounds = bounds.includingCoordinate(marker.position)
    }

    googleMapView.animateWithCameraUpdate(GMSCameraUpdate.fitBounds(bounds))

}
like image 422
lifewithelliott Avatar asked Jan 29 '16 22:01

lifewithelliott


People also ask

How do I add a marker to a gmsmapview object?

To add a marker, create a GMSMarker object that includes a position and title, and set its map. The following example demonstrates how to add a marker to an existing GMSMapView object.

What is a polygon in Google Maps?

google.maps.Polygon class. A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. See the samples in the developer's guide, starting with a simple polygon, a polygon with a hole, and more.

How do you draw a polyline on Google Maps?

google.maps. Polyline class A polyline is a linear overlay of connected line segments on the map. This class extends MVCObject . Create a polyline using the passed PolylineOptions, which specify both the path of the polyline and the stroke style to use when drawing the polyline.

What happens if map is set to null on polyline?

If map is set to null, the shape will be removed. Sets the path. See PolylineOptions for more details. Hides this poly if set to false. This event is fired when the DOM click event is fired on the Polyline.


3 Answers

For Swift 2.0 Google Maps, to make your map view fit the polyline of the route you are drawing:

let path: GMSPath = GMSPath(fromEncodedPath: route)!
    routePolyline = GMSPolyline(path: path)
    routePolyline.map = mapView


    var bounds = GMSCoordinateBounds()

    for index in 1...path.count() {
        bounds = bounds.includingCoordinate(path.coordinateAtIndex(index))
    }

    mapView.animateWithCameraUpdate(GMSCameraUpdate.fitBounds(bounds))
like image 80
Manuel BM Avatar answered Oct 07 '22 19:10

Manuel BM


Though the question has an accepted answer,

Still one point which has not been discussed.

GMSPolyLine has a property ".path" which can used to bound the map with the complete polyline itself.

mapView.animate(with: GMSCameraUpdate.fit(GMSCoordinateBounds(path: self.polyLineObject.path!), withPadding: 10))
  • mapView is an instance of GMSMapView()
  • polyLineObject is an instance of GMSPolyLine()

With this approach, It'll do the job for sure.

Coz it has Done for me..

Hope it Helps..

like image 11
Yash Bedi Avatar answered Oct 07 '22 18:10

Yash Bedi


You can zoom the map according the route or line displayed in the mapview. So that your route is displayed with in the mapView bounds.

let bounds = GMSCoordinateBounds(path:path! )
self.mapView!.animate(with: GMSCameraUpdate.fit(bounds, withPadding: 50.0))

Here path is GMSPath of the route and mapView is GmsMapView.

like image 2
shubham Avatar answered Oct 07 '22 19:10

shubham