CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
mcmonty
mcmonty

Reputation: 83

Google Maps API V3 infowindow

While developing this solution, I learned that API V2 was being deprecated. I've since begun work on a version utilizing API V3. This work-in-progress can be found at My New Map. Special thanks are due to David Marland at Hammerspace for accelerating this conversion for me.

I'm down to 3 remaining issues..the first of which I will address in this post.

I am unable to trigger the infowindows I have defined:

 google.maps.event.addListener(polyline, 'click', function(event) {
    if (polyline.Contains(event.latLng)) {
        infowindowInside.open(map,polyline);
    } else {
        infowindowOutside.open(map,polyline);
    }
  });

I am attaching them to a polygon..not a marker. The polygon is written:

var path = [
new google.maps.LatLng(35.950079, -84.104977),
new google.maps.LatLng(35.950774, -84.049702),
new google.maps.LatLng(35.946883, -84.047813),
new google.maps.LatLng(35.945354, -84.045067),
new google.maps.LatLng(35.940907, -84.042149),
new google.maps.LatLng(35.930483, -84.037857),
new google.maps.LatLng(35.939656, -84.037857),
new google.maps.LatLng(35.928120, -84.076309),
new google.maps.LatLng(35.938822, -84.066868),
new google.maps.LatLng(35.950079, -84.104977)];
var polyline = new google.maps.Polygon({path:path, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, clickable:false});
polyline.setMap(map);

I appreciate any guidance you can provide.

Thank you.

** UPDATED *****

I've now modified the code to:

google.maps.event.addListener(polyline, 'click', function(event) {
    if (polyline.ContainsLocation(event.latLng, polyline)) {
        window.alert('inside');//infowindowInside.open(map,polyline);
    } else {
        window.alert('outside');//infowindowOutside.open(map,polyline);
    }
  });

However..still no trigger.

Upvotes: 0

Views: 1122

Answers (2)

sleignnet
sleignnet

Reputation: 11

Google maps api v3 does not allow you to add infowindows to polylines or polygons. The solution around this is to grab the lat/lng coordinates of the mouseclick and attach the info window (where the user clicked his/her mouse) to the map like:

google.maps.event.addListener(polyline, 'click', function(event) {
 if (polyline.Contains(event.latLng)) {
    infowindowInside.open(map);
 } else {
    infowindowOutside.open(map);
 }
});

(note how there isn't a second argument in the .open() method)

otherwise you can figure out the lat/lng of either the center of your polygon or one of its corners and attach the infowindow there (but to the map)

that will allow you to display your infowindow while making it appear as tho it is attached to the polygon.

Edit: Also -- as mano marks had stated about .Contains -- I am not sure if that method exists or not either, so that block of code you have may still not work even after removing the second argument from the .open() method. you may have to take a different approach to your logic if that's the case, but attaching the marker to the map instead of your polygon or polyline will solve your main issue.

Upvotes: 1

Mano Marks
Mano Marks

Reputation: 8819

Possibly because Polygon doesn't have a "contains" function. You should look at using the Google Maps API Geometry Library, which has a containsLocation function.

Upvotes: 2

Related Questions