how to get array of polyline coordinates from google.maps.Circle
's object
there is no api doc entry about that
how to get array of polyline coordinates from google.maps.Circle
's object
there is no api doc entry about that
A google.maps.Circle doesn't contain an array of coordinates. If you want a google.maps.Polygon that is shaped like a circle, you need to make one.
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir==1) {
var start=0;
var end=points+1; // one extra here makes sure we connect the path
} else {
var start=points+1;
var end=0;
}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)
{
var theta = Math.PI * (i / (points/2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
}
return extp;
}
var circle = new google.maps.Polygon({
map: map,
paths: [drawCircle(new google.maps.LatLng(-33.9,151.2), 100, 1)],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
code snippet:
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir == 1) {
var start = 0;
var end = points + 1
} // one extra here makes sure we connect the
else {
var start = points + 1;
var end = 0
}
for (var i = start;
(dir == 1 ? i < end : i > end); i = i + dir) {
var theta = Math.PI * (i / (points / 2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
bounds.extend(extp[extp.length - 1]);
}
// alert(extp.length);
return extp;
}
var map = null;
var bounds = null;
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
bounds = new google.maps.LatLngBounds();
var donut = new google.maps.Polygon({
paths: [drawCircle(new google.maps.LatLng(-33.9, 151.2), 100, 1),
drawCircle(new google.maps.LatLng(-33.9, 151.2), 50, -1)
],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
donut.setMap(map);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
I implement this inside autocomplete, but, can't understand this: var points = 32; how calculate this variable?
createAutocomplete() {
var drawer = this.drawCircle;
var MAPS = window.Heatmap.Maps;
const center = MAPS.map.center;
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
let input = document.getElementById("search");
const options = {
bounds: defaultBounds,
componentRestrictions: {country: "us"},
fields: ["address_components", "geometry", "icon", "name"],
origin: MAPS.map.center,
strictBounds: false,
types: ['(cities)'],
};
MAPS.autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(MAPS.autocomplete, 'place_changed', function () {
const selectedIndex = document.getElementById("distance").selectedIndex;
let distance = document.getElementsByTagName("option")[selectedIndex].value;
if (MAPS.circle.instance) {
MAPS.circle.instance.setMap(null);
MAPS.marker.collection['searchMarker'].setMap(null);
}
let place = MAPS.autocomplete.getPlace();
var center = {lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
MAPS.map.instance.panTo(center);
MAPS.map.instance.setZoom(7);
MAPS.marker.collection['searchMarker'] = new google.maps.Marker({
position: center,
map: MAPS.map.instance,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
}
});
MAPS.circle.instance = new google.maps.Polygon({
map: MAPS.map.instance,
paths: [drawer(center, distance, 1)],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
console.log(MAPS.circle.instance.getPath())
});
}
drawCircle(point, radius, dir) {
var d2r = Math.PI / 180;
var r2d = 180 / Math.PI;
var earthsradius = 3963;
var points = 32;
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat * d2r);
var extp = [];
var start = null;
var end = null;
if (dir === 1) {
start = 0;
end = points + 1;
} else {
start = points + 1;
end = 0;
}
for (var i = start; (dir === 1 ? i < end : i > end); i = i + dir) {
var theta = Math.PI * (i / (points / 2));
var ey = point.lng + (rlng * Math.cos(theta));
var ex = point.lat + (rlat * Math.sin(theta));
extp.push(new google.maps.LatLng(ex, ey));
}
return extp;
}