I've been banging my head against the wall all morning with this one. I an creating an array of polygons, and want to associate some data in each one that will show in an infoWindow. I can see all the polygons on the map. I add the listener, and it fires (the color change happens), but I don't get the infoWindow. Any help would be greatly appreaciated!
Cheers!
C...
tmppoly = new google.maps.Polygon({
map: map,
paths: polypath,
strokeColor: scolor,
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: fcolor,
fillOpacity: 0.5
});
addPolygonClick(tmppoly,mdata);
plot_polygons.push(tmppoly);
...
function addPolygonClick(poly,html) {
infowindow = new google.maps.InfoWindow(
{
content: html
});
google.maps.event.addListener(poly,'click', function(event) {
this.setOptions({fillColor: "#000000"});
infowindow.open(map);
});
}
I can provide some useful suggestions about your question.
Firstly, you should know the expression about the method 'infowindow.open(map, anchor?:MVCObject)'. As the google api v3 says: In the core API, the only anchor is the Marker class. Polygon class does not match the condition, however, we can achieve in another way.
var polygon = new google.maps.Polygon({
paths: PGpoints, //The PGpoints is the collection of points around this polygon.
map: map,
strokeColor: colory,
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: colory,
fillOpacity: 0.35
});
polygon.set("Info", idy); // Set some attributes for adding extra information into this polygon.
google.maps.event.addListener(polygon, 'click', function() {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Information : " + polygon.get("Info"));
// 'laty,lngy' is the location of one point in PGpoints, which can be chosen as you wish
infoWindow.setPosition(new google.maps.LatLng(laty,lngy));
infoWindow.open(map);
});
The code above has passed test, you can use it directly. Then, if you click one polygon, infoWindow would appear above the map.
There are a few problems that might be preventing this from working:
1:
You need a var in front of infowindow, to make it a local variable:
var infowindow = new google.maps.InfoWindow(...
As it is, you are replacing the infowindow variable every time you add a new click listener.
2:
You need to specify a position or anchor for the infowindow (see: http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions).
The only valid anchor is a Marker, so you will probably want to specify the 'position' property. 'position' must be a valid google.maps.LatLng object. I suspect you will want to compute the center of your polygon to use as the position.
You also need to make sure map is a global variable, although it likely is looking at the rest of your code.
Please take a look at this https://developers.google.com/maps/documentation/javascript/examples/event-closure and combine it with the response above to assign a unique message for each polygon in your array of polygons.
I am also working in having multiple polygons in one layer with unique message for each polygon. I have not succeeded yet. With the response above, I got info window to show up, but I get the same message for all the polygons.
Once I solve my problem, I will post the solution.
Related
I need to retrieve pin codes (Zip Codes) from a given radius using google maps api. Is it possible?
I have researched quite a bit online but cant seem to find relevant answers. I am able to draw the radius but cannot figure how to retrieve pin codes (Zip Codes) from that radius
var circle = new google.maps.Circle({
map:map,
fillColor: '#FF0000',
fillOpacity: 0.35,
radius: 5000,
});
circle.bindTo('center', marker, 'position');
Google maps has an api for "address lookup" based on a specific location. Take a look at Reverse geocoding. But this api is expensive #$5 per 1000 lookups and you have no idea where to probe. If you are looking for zip code regions then you can buy these areas online for example US zip codes database but its expensive. A more important question is what are you trying to do with your code? What are you going to do with the zipcodes when you get them from your Circle 10km in diameter?
I have an array of Lat/Lng's that I would like to be able to display on a poly line.
Apologies if this is not very clear, please let me know HOW TO IMPROVE.
Here is an example of the array (Note the third object is the heading):
"Cot":[-37.582214,172.307343,null,-37.576828,172.321808,65.0,-37.155396,173.440231,65.0,-37.151962,173.45285,70.0,-37.148872,173.465286,70.0,-37.145985,173.477768,75.0,-37.138184,173.520584,75.0,-37.136169,173.532623,80.0,-37.054092,174.024567,80.0,-37.052032,174.03653,75.0,-37.043655,174.084564,75.0,-37.041733,174.096069,80.0,-37.007034,174.300613,80.0,-37.004932,174.312897,75.0,-36.99559,174.366943,75.0,-36.993576,174.378922,80.0,-36.989849,174.400497,80.0,-36.987946,174.411575,75.0,-36.981812,174.445007,75.0]
There are multiple aircraft(markers) on the map, when I use the code below it will read the first lat/lng of the array and if I click on another marker it will draw a line to another marker how ever I would like to be able to have a poly line behind each marker that shows when the user clicks on the marker and updates as the marker moves instead of it drawing a line to another marker start point (As seen in images below).
path.push(new google.maps.LatLng(p.Cot[0] , p.Cot[1]));
poly.setPath(path);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(Map);
var path = new google.maps.MVCArray();
// every time the path is updated, automatically the map will update the polyline
Images to help explain whats going wrong:
https://ibb.co/n5n2Gc
https://ibb.co/jauShH
I have a set of markers created around an area and I want to join them together to create a polygon (and shade it). My polygon code:
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#f33f00',
fillColor: '#ff99aa',
fillOpacity: 0.2
});
polygon.setMap(map);
Where I have
var points = new Array();
points.push(new google.maps.LatLng(prev_dest.y, prev_dest.x));
Is the .push command no longer working in V3? Previously this worked:
map.addOverlay(new GPolygon(points, "#f33f00", 5, 1, "#ff99aa", 0.2));
Push is simply adding items to the array it has nothing to do with Google Maps API.
For a polygon to know its "closed" - make sure your first and last point in the array of points are the same - otherwise its not a valid polygon.
if its not simply add your fist point again to the array of points.
I'd like to know if it's possible to put a radius delimiter in Google maps!?
For example: I select a region or a city and I had a 5 mile radius and the delimiter increases, drawing it!
Please consider this example: I choose "Amsterdam" as the place, and then I add 5km to it and it will return the results from "Amsterdam" plus the 5km radius
http://www.funda.nl/koop/amsterdam/+5km/
My problem is I dont understand how to add 5km to "Amsterdam" since it cant be the center point - I think I need the delimiter for the region "Amsterdam". Does this exist on Google maps API or any other API?
Update:
Map Charts
as per your requirement, i think the above link will help you.
Try this,
// Create marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(39.7433,-104.9872),
title: 'Some location'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 8047, // 5 miles in metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
Reference:
http://seriouscodage.blogspot.in/2010/11/visualizing-data-as-circles-in-google.html
I'm in the process of migrating our Map application from V2 to V3 (3.2).
I had a loop that read LatLng and put them in a array to display as a Polyline on the map.
I then set the length of my array to 0 and then fill it again in the loop with other LatLng to display another Polyline... and so on (many times).
It was working fine in V2, but not in V3.
Since my code is complex, I tried to write the simpliest code possible to demonstrate my issue:
function setPolyline(points) {
var polyline = new google.maps.Polyline({
path: points,
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 2
});
polyline.setMap(map);
}
var mapDiv = document.getElementById('map');
var mapCenter = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 2,
center: mapCenter,
backgroundColor: '#E1E1E1',
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var points=[];
points[0]=new google.maps.LatLng(-35, 71);
points[1]=new google.maps.LatLng(-36, 75);
points[2]=new google.maps.LatLng(-37, 91);
setPolyline(points);
points.length=0;
points[0]=new google.maps.LatLng(-31, 71);
points[1]=new google.maps.LatLng(-32, 75);
setPolyline(points);
What happens is that only the second Polyline is shown (and not the first one).
To make it works, I have to either use a different variable name (points1, points2, points3, ...) which I can't use because my code is normally in a loop or re-declare my variable each time in the loop instead of before it (var points=[] before each Polyline and remove the points.length=0 line).
Maybe I'm missing something about JavaScript, but I usually declare my variable outside the loop (before) once and use it inside the loop.
What am I doing wrong?
Can someone help?
Here's a simple Map I did to demonstrate my issue:
http://www.canamgroup.ws/GM.nsf/Map?OpenPage
(It's not in a loop, but the issue is the same. Only the last Polyline is displayed if I don't use a different variable name for my array or if I don't re-declare it each time)
Thanks!
In case it might help somebody, see this other discussion:
http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic%2Fgoogle-maps-js-api-v3%2FLp9tYYwkph4%2Fdiscussion