Develop Reference

Create a square / polygon with a size in meters in Google Maps in JS

I'm going crazy soon! I've read pretty much all of the Google Maps JavaScript API V3 documentation but I can't find a way to develop the following use case:
I want to create a square / circle / polygon with a specific size in meters. The radius of the circle, or the distance between LAT and LNG in meters.
I know it's possible to measure the distance in meters between to LatLngs, but I want to create it wit that dimension.
Is there anybody who know's how to do this? That would be amazing!

You can use the Geometry library and more specifically the computeOffset method.
The distance parameter is in meters, although this is not clear from the docs.
Here is a simple example using the Rectangle class but you can use any shape. For circles, you don't need this as the radius is already expressed in meters.
For Rectangles, you need to calculate the bounds (ne for north-east and sw for south-west). Here I create a rectangle (a square in this case) with a 500 meters diagonal.
For Polygons, you need to provide a path instead of bounds, but the method remains the same. If you know the starting point, the distance and the heading between every path point, you can come up with any kind of shape.
You need to load the Geometry library in the API call:
https://maps.googleapis.com/maps/api/js?libraries=geometry
function initialize() {
var sw = new google.maps.LatLng(52.51,13.41);
var mapOptions = {
zoom: 13,
center: sw,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: sw,
map: map,
label: 'SW'
});
var ne = google.maps.geometry.spherical.computeOffset(sw, 500, 45);
var marker = new google.maps.Marker({
position: ne,
map: map,
label: 'NE'
});
var rectangle = new google.maps.Rectangle({
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#FF0000',
fillOpacity: .6,
bounds: new google.maps.LatLngBounds(sw,ne),
map: map,
zIndex: 0
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

How To Get Coordinates of the google maps Corners?

I need to draw polygon with just four coordinates that is for the four corners of the loaded map in zoom 13 on other hand get coordinates of the whole map to show to user. ( user search the specific area with draw a polygon on the map but if he/she don't draw a polygon i want to draw a polygon in size of the projected map for him/her and show the result. )

Create the map at zoom: 13
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 51.561162, lng: -0.163331},
zoom: 13
});
Then use map.getBounds() to get the LatLngBounds of the visible map.
var bounds = map.getBounds();
You can then use this to get the LatLng coordinates of the South West and North East corners:
var NECorner = bounds.getNorthEast();
var SWCorner = bounds.getSouthWest();
Then you can use those to work out the coordinates for the other two corners:
var NWCorner = new google.maps.LatLng(NECorner.lat(), SWCorner.lng());
var SECorner = new google.maps.LatLng(SWCorner.lat(), NECorner.lng());
And finally draw the polygon, using those corners for the paths array:
var polygon = new google.maps.Polygon({
map: map,
paths: [NWCorner, NECorner, SECorner, SWCorner],
fillColor: 'red',
fillOpacity: 0.7
});

Thanks duncan
Lemme write it in short form for Kotlin developers
var bounds = googleMap!!.projection.visibleRegion.latLngBounds
var neCorner = bounds.northeast
var swCorner = bounds.southwest
var nwCorner = LatLng(neCorner.latitude, swCorner.longitude)
var seCorner = LatLng(swCorner.latitude, neCorner.longitude)

Draw a doughnut in Google Maps JavaScript API (highlight the outside of inner circle and the inside of outer circle) [duplicate]

This question already has answers here:
Draw ring (not circle) in Google Maps API
(4 answers)
Closed 7 years ago.
How to draw a doughnut with Google Maps JavaScript API?
For highlighting the outside of inner circle and the inside of outer circle.
My idea is to put the inner circle before the outer.
The problem is it cannot be loaded when setting the fillOpacity of the inner circle.
var citymap = {};
citymap['innerCircle'] = {
center: amsterdam,
radius: 3146.2245383489244,
//opacity = 0.0 // bug here
};
citymap['outerCircle'] = {
center: amsterdam,
radius: 7021.113634532091,
opacity: 0.35};
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: citymap[city].opacity,
map: map,
center: citymap[city].center,
radius: citymap[city].radius
};

Typically in google maps you can draw polygon with hole the first polygon is the outer shape e the other are the inner shape
see this stackoverflow for examples ring example

Google maps V3: prevent marker scaling

I have a google map, and an marker on it.
I need the marker to be a fixed size of, for example, 10x10 pixels, and remail the same even if i zoom in or zoom out.
This is what i have right now (and is not workig):
var marker = new google.maps.Marker({
position: circleCenter,
map: googleMap,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0.5,
fillColor: 'ff0000',
strokeWeight: 10,
size: 5
}
});
Is this possible to block the marker of scaling it's size when the map zoom is changed?

Google does not have a out-of-box way to stop markers from scaling.
You could use a Ground Overlay to set a fixed area on the map and then attach an image. The trick with ground overlays is you have to know the coordinates of the bounds object and you probably will have to come up with some way of calculating the bounds. In this example I just expand a center point into a rectangle.
You would also loose other marker capabilities since this method doesn't use a marker object (e.g. dragging, animations, etc.), but the overlays do have click events.
Here is a proof of concept: http://jsfiddle.net/bryan_weaver/4rxqQ/
relevant code:
function initialize() {
var map;
var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
var options = {
zoom: 9,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var icon = 'https://www.google.com/mapfiles/marker_black.png';
var iconBounds = constructBounds(38.713107, -90.42984);
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
staticOverlay.setMap(map);
}
function constructBounds(lat, lng){
var sw = new google.maps.LatLng(lat - .03, lng - .025)
var ne = new google.maps.LatLng(lat + .03, lng + .025)
return new google.maps.LatLngBounds(sw, ne);
}

Work out LatLng distance from LatLng (or point in circle) - Google Maps v3

I need to find out if certain LatLngs are inside a Google Maps Circle (one of these: http://code.google.com/apis/maps/documentation/javascript/overlays.html#Circles). How would I get around doing this? My markup for making the circle is:
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
circlemarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
THEradius = parseFloat(THEradius);
var populationOptions = {
strokeColor: "#BDAEBB",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#BDAEBB",
fillOpacity: 0.5,
map: map,
center: results[0].geometry.location,
radius: THEradius
};
cityCircle = new google.maps.Circle(populationOptions);
map.fitBounds(cityCircle.getBounds());
}
});
Could I just use the radius?

var distance = google.maps.geometry.spherical.computeDistanceBetween(
results[0].geometry.location, otherLatLng);
if (distance <= THEradius) {...} else {...}
I hope that works for you. See http://code.google.com/apis/maps/documentation/javascript/reference.html#spherical

What you need to do is to convert either your lat-lon list into google coordinate space, or the circle into lat-lon coordinate space.
How you do the conversion depends on the language you are using, but there are websites that will do the conversion for you if it is a one off.
Once you've got the lat-lon locations in the same co-ordinate space as your circle, you can use simple pythagoras math to work out if the location is less than the radius of the circle (as you suggest).
HYP = (OPP^2 * ADJ^2)^0.5
Where:
OPP is the difference in x direction from the centre of the circle
ADJ is the difference in y direction from the centre of the circle.
HYP is the distance in a straight line from the centre of the circle

In terms of mathematics, to find the distance from one point to another in 2D, use Pythagoras:
X = X1 - X2
Y = Y1 - Y2
(The above effectively calculates a vector from one point to another)
Distance from 1 to 2 = sqrt(X^2 + Y^2)
Then you can compare that to your radius. If the distance is less than your radius, the point is within the circle.
You need to first acquire the point corresponding to the centre of the circle and the point you are trying to compare. These must be in the same co-ordinate space.