Develop Reference

Find list of pin codes within given radius from marker

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?

Polylines showing incorrectly

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

Colour-coding points on Google Maps

I'm currently developing an application as a page of a college project to display information about house price costs and am looking to implement a colour-coded map for different years. The idea would be that there would be a dot where each house sold was located on a map (Google Maps for example), and colour-coded green to red depending on how expensive it was.
I'm looking for a way to implement this using the Google Maps API, but have been unable to find a solution that doesn't seriously slow up the application as I would be loading in ~30k datapoints for each year and the application currently had 5 years worth of data.
Would anyone have any suggestions on what to use. I've looked at Google's Geocharts and they don't really offer what I am looking for. I've also looked at Heatmaps, and though they get the colouring effect I'm looking for, the points are weighted so the colour is dependent on proximity rather than my specified variable, price.

30K points * 5 years = 150K markers. That might be too much. You should be looking for a way to show only one year of history at a time and/or use marker clustering.
Regarding the color markers, you could use SVG markers for that. You can easily change the color of your SVG path. With a little bit of calculation, you should be able to process all your points and define the color in which to draw the markers.
Example round SVG marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: // your marker color,
fillOpacity: .8,
anchor: new google.maps.Point(0, 0),
strokeWeight: 0
}
var marker = new google.maps.Marker({
position: // your marker position,
map: map,
draggable: false,
icon: icon,
title: 'some title'
});
Here is a quick example:
JSFiddle demo

GoogleMaps - multiple markers with multiple colors

I'm trying to make a nice google map with some markers on it. I've found some really convinient solution in the web, which covers almost my every need :D I'd like to colorize pin/markers on the map.
Well, tried to make a working jsfiddle, but unfortunately, something went wrong :( so you wouldn't see the map, but there are all codes :)
http://jsfiddle.net/hf37ftra/9/
// Multiple Markers
var markers = [
['Marker_name', 51.113882,17.070474],
];
this part is responsible for showing multiple markers, can I somehow define here the color of the marker (I know it is possible, because I've found tutorials to change ALL the markers colors, but I'd like to make let's say 4-5 different coloured markers)?
Later in the code is part for custom info box for every marker, so maybe it could be done that way :)
thanks!

You may use something like :
var markers = [
['Starter', 51.113882,17.070474,'icon1.png'],
];
and change your constructor to :
[...]
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][3]
});

In your for loop:
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
You can add extra line there:
icon: 'brownMarker.png'

Well, I love being on stackoverflow, when I can learn everyday something new with just some little help from others :)
// Multiple Markers
var markers = [
['Title', 51.113882,17.070474, 'http://youriconaddress'],
];
and then, in part:
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][3] // [3] tells JS to take third 'argument' from markers variable, from each one.
});
That way you can add as many arguments as you want, having a really nice and simple tool to make nicer google maps!

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.