google maps middle of a polyline (centroid?)

Question

I have a list of polylines, just like google maps does when I click on the polyline I want an infowindow to show up just where I clicked, and it works just fine with this function

function mapsInfoWindow(polyline, content) {
    google.maps.event.addListener(polyline, 'click', function(event) {            
        infowindow.content = content;
        infowindow.position = event.latLng;
        infowindow.open(map);
    });
}

the problem comes when I click on the list(using the same function for that), event obviously doesn't have the latLng, but I'd like infowindow to show up in the middle of the polyline anyway, just like it does when you click on the list in the google maps link I mentioned before.

Tried LatLngBounds(); but that gives the actuall center of the area the polylines create, not the middle I need.

Any idea how to do it?

Solution 1

So this is the(bit hacky) solution.

Use http://www.geocodezip.com/scripts/v3_epoly.js library, then count the total length of you polyline(various ways), divide it in half and call epoly's .GetPointsAtDistance() function upon it.

This should return LatLng point, but it acts a bit weird sometimes, returning two points or even turning that point somehow "broken". So the most secure thing you can do is probably this:

var pointInHalf = polyline.GetPointsAtDistance(polylineLength);
var pointCoordinate = new google.maps.LatLng(pointInHalf[0].lat(), pointInHalf[0].lng());

Well, better than nothing.

Solution 2

From http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html

Without extensions and assuming the polyline is a straight line.

It is possible to convert the lat/lng coordinates to point plane (x,y) postions and calculate the average between the two. This will give you a central pixel position. You can then convert this position back to a latlng for map plotting.

var startLatLng = startMarker.getPosition(); 
var endLatLng = endMarker.getPosition(); 
var startPoint = projection.fromLatLngToPoint(startLatLng); 
var endPoint = projection.fromLatLngToPoint(endLatLng); 
// Average 
var midPoint = new google.maps.Point( 
    (startPoint.x + endPoint.x) / 2, 
    (startPoint.y + endPoint.y) / 2); 
// Unproject 
var midLatLng = projection.fromPointToLatLng(midPoint); 
var midMarker = createMarker(midLatLng, "text");

More information on changing the projection http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

Solution 3

to get the coordinates of your polyline you should do:

var widePath = new google.maps.Polyline({
path: waypointsCoordinates,
strokeColor: '#3366FF',
strokeOpacity: 0.0,
editable: true,
draggable: true,                       
strokeWeight: 3
});

and do:

var latLng [];
latLng = widePath.getPath().getArray();

Solution 4

So firstly you need to use the geometry library which calculates distances. Add libraries=geometry to your JS call, e.g.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

Assuming you know the start point and end point for your polyline, you should be able to do this:

var inBetween = google.maps.geometry.spherical.interpolate(startLatlng, endLatlng, 0.5);  
infowindow.position = inBetween;

I guess if you don't already know the start and end points, you could work it out from polyline.getPath().

Solution 5

Might be a bit old as well, but why not add the infobox on the click?

infowindow.setPosition(event.latLng);
infowindow.open(this.getMap());

If it's a click that is.

View more solutions