How to put a infowindow on polyline in Google Maps v3?

Question

I want to know how to show infowindow on polyline in using Google Maps Api V3? and to appear in the middle of the polyline ?!

Answer 1

find the middle point and set your custom view .

func showPath(polyStr :String){

    polyline?.map = nil
    mapView1.reloadInputViews()
    pathDraw = GMSPath(fromEncodedPath: polyStr)!
    polyline = GMSPolyline(path: pathDraw)

    polyline?.strokeWidth = 4.0
    polyline?.strokeColor = UIColor.init(red: 247/255.0, green: 55/255.0, blue: 76/255.0, alpha: 1.0)
    polyline?.map = mapView1


    let poinsCount = pathDraw.count()
    let midpoint = pathDraw.coordinate(at: poinsCount)

    DispatchQueue.main.async
    {
        self.addMarkerPin(corrdinate: midCordinate, distance: "10 min")
    }

}
func addMarkerPin(corrdinate:CLLocationCoordinate2D, distance: String)
{
    let marker = GMSMarker()
    marker.position = corrdinate

    PathTimeView = PathInfoView.loadFromNib() //here i am load Xib file, you can use your custom view 
    let DynamicView=PathTimeView
    DynamicView.timelbl.text = distance

    UIGraphicsBeginImageContextWithOptions(DynamicView.frame.size, false, UIScreen.main.scale)
    DynamicView.layer.render(in: UIGraphicsGetCurrentContext()!)
    let imageConverted: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    marker.icon = imageConverted
    marker.map = self.mapView1
    marker.infoWindowAnchor = CGPoint(x: -1900 , y: -2000)
}

Answer 2

First you should got center/middle of polyline and this what works for me

  private fun centerPos(points: MutableList<LatLng>): LatLng {
    val middleDistance = SphericalUtil.computeLength(points).div(2)
    return extrapolate(points, points.first(), middleDistance.toFloat()) ?: points[0]
}
private fun extrapolate(path: List<LatLng>, origin: LatLng, distance: Float): LatLng? {
    var extrapolated: LatLng? = null
    if (!PolyUtil.isLocationOnPath(
            origin,
            path,
            false,
            1.0
        )
    ) { // If the location is not on path non geodesic, 1 meter tolerance
        return null
    }
    var accDistance = 0f
    var foundStart = false
    val segment: MutableList<LatLng> = ArrayList()
    for (i in 0 until path.size - 1) {
        val segmentStart = path[i]
        val segmentEnd = path[i + 1]
        segment.clear()
        segment.add(segmentStart)
        segment.add(segmentEnd)
        var currentDistance = 0.0
        if (!foundStart) {
            if (PolyUtil.isLocationOnPath(origin, segment, false, 1.0)) {
                foundStart = true
                currentDistance = SphericalUtil.computeDistanceBetween(origin, segmentEnd)
                if (currentDistance > distance) {
                    val heading = SphericalUtil.computeHeading(origin, segmentEnd)
                    extrapolated = SphericalUtil.computeOffset(
                        origin,
                        (distance - accDistance).toDouble(),
                        heading
                    )
                    break
                }
            }
        } else {
            currentDistance = SphericalUtil.computeDistanceBetween(segmentStart, segmentEnd)
            if (currentDistance + accDistance > distance) {
                val heading = SphericalUtil.computeHeading(segmentStart, segmentEnd)
                extrapolated = SphericalUtil.computeOffset(
                    segmentStart,
                    (distance - accDistance).toDouble(),
                    heading
                )
                break
            }
        }
        accDistance += currentDistance.toFloat()
    }
    return extrapolated
}

then You can add infoWindow with normal way with your platform at it is differ from each platform

Answer 3

Firstly you will need to calculate the middle/center of the polyline. This has been discussed and answered here; https://stackoverflow.com/a/9090409/787921

Then you will have to open the infowindow;

var infowindow = new google.maps.InfoWindow({
             content: "infowindow text content"});
infowindow.setPosition(midLatLng);
infowindow.open(map);