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?

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?

• javascript
• google-maps
• google-maps-api-3
• google-polyline

• I have no ready-to-use solution, but here is the clue: (rbrundritt.wordpress.com/2008/10/14/…) It would be appreciated if you post your solution as answer. Cheers. – dmitry Commented Oct 19, 2011 at 10:08
• Was really mainly wondering whether the api itself can help with it.. apparently it doesn't. I'll look into that link, thanks. – fxck Commented Oct 19, 2011 at 11:14
• gis.stackexchange.com/questions/2128/… more clues – fxck Commented Oct 19, 2011 at 11:24
• I think that it was meant to be some middle point in a polyline, rather than centroid of a polygon. It is not the same. – dmitry Commented Oct 19, 2011 at 11:55
• And, furthemore. I'm trying to maintain extensions for gmaps v3, your code for google.maps.Polyline.getMidPoint() would be useful. If you'll code it, of course :) – dmitry Commented Oct 19, 2011 at 11:59

5 Answers 5

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.

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

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().

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();

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.