Develop Reference

Add Polygon with array of points

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.

Google Maps Radius

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

Length buffer around polyline

I'm not very good at mathematics, so I got a problem. I have a route from one, to another distination. Some time I was trying to apply a colored plot aroud the route in fixed length. But I cant get a nice rounded corners and my lack of math is making me a lot of truble.
Now I got this
And the code
var r = [];
var bla = result.routes[0].overview_path;
for(i in result.routes[0].overview_path) {
r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
}
bla.reverse();
for(x in bla) {
r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
}
var kelias = new google.maps.Polyline({
path: result.routes[0].overview_path,
strokeColor: "#00000",
strokeOpacity: 1.0,
strokeWeight: 2
});
kelias.setMap(MAP);
fonas = new google.maps.Polygon({
paths: r,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
fonas.setMap(MAP);
I just want to ask for some information directions OR maybe some of you already have made this functionality and have some functions
Working demo here. Somehow i need to get same result of drawing that.
SOLUTIONS
Buffered polyline using JSTS lib.
ArcGIS server solution

I found this stack in SO Path stroke algorithm (convert to triangles/quads) or other suggestions where there is a similar question, just for C++.
The answer is a algorithm in this PDF on page 3 (the CONVOLVE algorithm).
If you perhaps could make a working example in JSFiddle, we could be able to program a solution in there.
-- edit
After some time of analysing the script in the link you provided for the life demo, I found, that the polyline is not calculated in javascript, but is calculated on the server and returned with a AJAX call to some PERL programme.

Can't you just draw another polyline on the same path as the first one, with a larger stroke? It doesn't give you exactly the same results, i.e. a polygon with a border color different from its fill color, but the overall effect is very similar.
// first, black line
var kelias = new google.maps.Polyline({
path: result.routes[0].overview_path,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 2
});
// second, translucent red line
var kelias2 = new google.maps.Polyline({
path: result.routes[0].overview_path,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 40,
map: MAP
});
Update: You're adding and subtracting 'z' from both the latitude and longitude of the points along your path. Given that latitude runs from +90 to -90, but longitude runs from +180 to -180, I think you maybe need different values for each.

Google Maps - Attaching InfoWindows to polygons in array

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.

Google Maps API v3: Add Polylines inside a loop?

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