Develop Reference

Google Maps - Get coordinates for UK Counties

I was wondering whether anyone could please advise how I can get the coordinates for UK counties to be able to add a polygon to google maps using the google maps API?
I have looked at using https://nominatim.openstreetmap.org/details.php?place_id=198164455 to retrieve the OSM relation to be able to use http://polygons.openstreetmap.fr/
For example: Leicestershire OSM = 189890
http://polygons.openstreetmap.fr/index.py?id=189890
I have used the coordinates for the area however I believe these are incorrect since the polygon appears in the middle of the sea rather than over the county.
Can anyone please advise how I can get the coordinates for the UK counties to be able to add the polygon? I wasn't sure whether there are any tools that would generate these for you?
My code:
( var leicestershire should have the coordinates of the county )
function initialize() {
var pin = new google.maps.LatLng(52.374490, -0.713289);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
//minZoom: 15,
//maxZoom: 15,
center: pin,
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl:true,
mapTypeControl:false,
zoomControl: true,
streetViewControl: false,
draggable: true
});
var marker = new google.maps.Marker({
position: pin,
map: map
});
var leicestershire = [];
var leicestershirePoly = [];
leicestershire.forEach(function(coordinate) {
var latlng = coordinate.split(",");
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
if(!isNaN(lat) && !isNaN(lng)) {
leicestershirePoly.push({lat: lat, lng: lng});
}else{
console.log(coordinate);
}
});
var leicesterRegion = new google.maps.Polygon({
paths: leicestershirePoly,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
leicesterRegion.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Leicestershire resolves to 52.772571, -1.2052126 in Google Maps. The first line of coordinates in your example polygon is -1.5975472, 52.7004047 so obviously, latitude and longitude are inverted.
In your forEach loop, replace
var lat = parseFloat(latlng[0]);
var lng = parseFloat(latlng[1]);
by
var lat = parseFloat(latlng[1]);
var lng = parseFloat(latlng[0]);
That should be enough to fix the issue if the rest of your code is working.

how to get an image to point in a certain direction in a visualisation map

So I am using JavaScript to plot a position of a flight and its flight path on a visualisation map. I am getting the data from a node server that I have created. I have looked at similar question on stack over flow but I haven't been able to get them working.
I am currently struggling with the positioning of the flight icon, as I want it to point in the same direction as the flight path or even put a marker at the top of the image so it can point to a certain latitude and longitude. At the minute the flight icon only faces north.
Here is a screenshot of my code. I tried using the anchor in the Google maps API but I couldn't get it working so I commented it out.
var flightCord = [];
for (var i = 0; i < data.flight.length; i++) {
var lat = data.flight[0].lat1;
var lng = data.flight[0].lng1;
// Co-ordinates for Dublin Airport 53.421379, -6.27
var image = new google.maps.MarkerImage("plane3.png"
//new google.maps.Size(25,25),
//null, null,
//new google.maps.Point(53.4213879,-6.27)
//new google.maps.Point(0, 50)
);
var latLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
var flightCord = [
{lat:data.flight[0].lat1, lng: data.flight[0].lng1},
{lat:data.flight[i].lat1, lng:data.flight[i].lng1}];
}
var flightPath = new google.maps.Polyline({
path: flightCord,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 1
});

Drawing circles for all markers on google maps API v3

I have the following lat/long array, which i can draw it on map with success. My question is how can i have a loop and place a circle with custom Km radius (or standard radius if it's too much pain in the 4ss) for each array coordinates.
var locations = [
['lala', 37.0093833333333,24.7528638888889, 1],
['lala', 35.0093833333333,20.7528638888889, 2]
];
Thank you

var cityCircle
for (elements in your array) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: your latlng,
radius: your radius here
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
something like this?

Disable click on polygon

I have the following code to highlight an area on google maps using the javascript v3 api.
// Maps
$(document).ready(function(){
if($(document).find("map_canvas"))
Maps.init();
});
var Maps = {};
//The map to display
Maps.map;
//List of markers
Maps.markers = new Array();
Maps.markers.previous;
Maps.lines = new Array();
Maps.lines.toStart;
Maps.area;
//init the map
Maps.init = function() {
var mapOptions = {
center: new google.maps.LatLng(-39.483715,176.8942277),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Maps.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(Maps.map, 'click', function(event){Maps.addMarker(event.latLng);});
}
//Add a marker to the maps
Maps.addMarker = function(latLng){
var marker = new google.maps.Marker({
position: latLng,
map: Maps.map
});
Maps.markers.push(latLng);
console.log(Maps.markers.length);
if(Maps.markers.length > 1){
Maps.drawLine([Maps.markers.previous, latLng]);
}
Maps.markers.previous = latLng;
}
Maps.drawLine = function(path){
var Line = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
Line.setMap(Maps.map);
if(Maps.markers.length > 2){
if(Maps.lines.toStart != null)
Maps.lines.toStart.setMap(null);
Maps.lines.toStart = new google.maps.Polyline({
path: [path[path.length - 1], Maps.markers[0]],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
Maps.lines.toStart.setMap(Maps.map);
if(Maps.area != null)
Maps.area.setMap(null);
Maps.area = new google.maps.Polygon({
paths: Maps.markers,
strokeColor: "#000000",
strokeOpacity: 0,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Maps.area.setMap(Maps.map);
}
}
It works perfectly as expected an produces a result like so....
But the problem is, is that I need to add markers inside the polygon for obvious reasons. When I click on the polygon expecting a marker to be added the polygon seems to be getting the clicks and not the maps. Is there anyway to get around this? Or make it so only the map receives the clicks?

There is a clickable property in the polygon options. Set that to false and the polygon will ignore clicks and the event will fall through to the map.
Polygon Options

Google map circles are not round

I am trying to draw many circles over a Google Map (many circles per rooftop).
I tried the Circle class and seem to be okay for big circles, but when drawing small ones they are not round at all.
The code I'm using goes like this:
for(var i = 0; i < latitudes.length; i++)
var newCircle = new google.maps.Circle({
strokeColor: "#FFFFFF",
strokeOpacity: 0,
strokeWeight: 1,
fillColor: "#FFFFFF",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(latitudes[i], longitudes[i]),
radius: 0.5
});
newCircle.setMap(map);
And the result is:
I know that there are other ways to draw points over a google map, but I'd really like to go with the google solution if there is a way to make them look round as they should be.

You could use Symbols, they should be perfect circles. Try this:
var whiteCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1.0,
fillColor: "white",
strokeOpacity: 1.0,
strokeColor: "white",
strokeWeight: 1.0,
scale: 1.0
};
Then
for(var i = 0; i < latitudes.length; i++) {
var latLng = new google.maps.LatLng(latitudes[i], longitudes[i])
var newCircle = new google.maps.Marker({
icon: whiteCircle,
position: latLng
});
newCircle.setMap(map);
}
The circles are likely to be huge, so play around with the scale to get it right.
I have never used the Circle class. Symbols were introduced in this year's Google I/O. They are vectors, meaning you can pretty much define your own shape. Here's a link for more info:
googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

Anti-aliasing is critical.
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)
The Google solution will not work for smaller circles.