Develop Reference

Googlemaps Ionic Native Polygon With Hole

Trying to make the similar effect on my Googlemaps map.
This is using Ionic Native Google Maps plugin.
I currently have the following code.
Points are used to create an overlaying polygon across the whole map, and then I am using the drawCircle function to draw a circle by adding lat / lng points to the array extp.push({lat: ey,lng: ex});
points = [
{lat: 85,lng: 90},
{lat: 85,lng: 0.1},
{lat: 85,lng: -90},
{lat: 85,lng: -179.9},
{lat: 0,lng: -179.9},
{lat: -85,lng: -179.9},
{lat: -85,lng: -90},
{lat: -85,lng: 0.1},
{lat: -85,lng: 90},
{lat: -85,lng: 179.9},
{lat: 0,lng: 179.9},
{lat: 85,lng: 179.9} ];
drawCircle(point, radius, dir) {
let lat;
let lng;
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 or 6371 in km
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 ends
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));
let ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
let ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push({lat: ey,lng: ex});
}
return extp;
}
Loading the map here
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
this.geolocation.getCurrentPosition({enableHighAccuracy: true}).then((resp) => {
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
this.myLat = resp.coords.latitude;
this.myLong = resp.coords.longitude;
let loc: LatLng;
loc = new LatLng (resp.coords.latitude, resp.coords.longitude);
this.map.addPolygon({
'points': this.points,
'strokeColor': "blue",
'holes': this.drawCircle(loc,10,-1), //when adding this I lose the overlay and the hole is not drawn. When I remove it, it starts to work again but without a hole.
'strokeWidth': 4,
'fillColor': "#222222"
});
this.map.moveCamera({
'target': loc,
'zoom': 14
});
this.map.addMarker({
'position': loc,
'title': "Hello GoogleMap for Cordova!",
'icon' : 'https://image.flaticon.com/icons/svg/147/147144.svg'
});
}).catch((error) => {
console.log('Error getting location', error);
});
});

you can make hole by using ctx.clip() function.
1.make a canvas with full width,height.
2.fill canvas with "argb(100,255,0,0)".
3.use arc() and clip() to make a hole.
4.set strokeStyle to "argb(255,255,0,0)".
5.use arc() and stroke() to make red outline.
this is how to make a hole.

How to automatically scatter identical markers over a certain area

I'm currently building a webpage that shows customer reviews on a Google Maps. There is one issue and that is that there are already over 1200 reviews that needs to be shown on the map but those reviews only have a city attached to them so when I load all of those reviews in the map than a lot of them will share the exact same coordinates.
I am looking for a way to scatter identical markers within a certain radius. So lets say pick every single marker on the map and move them al 1% in a random direction to create distance between them.
I don't really mind how this will be done, be it by javascript or PHP, duriong the placement of the markers or beforehand with an algorithm that sets new coordinates one.

May be something like this
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: -25.363, lng: 131.044 }
});
var originalMarker = new google.maps.Marker({
position: { lat: -25.363, lng: 131.044 },
map: map,
title: ''
});
google.maps.event.addListenerOnce(map, 'idle', function () {
var circle = new google.maps.Circle({
map: map,
radius: 1000 * 1000, //in metres
fillColor: '#AA0000'
});
circle.bindTo('center', originalMarker, 'position');
drawMarkersInCircle(circle, 200);
});
}
function drawMarkersInCircle(circle, count) {
var map = circle.getMap();
var proj = map.getProjection();
var centerPoint = proj.fromLatLngToPoint(circle.getCenter());
var radius = Math.abs(proj.fromLatLngToPoint(circle.getBounds().getNorthEast()).x - centerPoint.x);
for (var i = 0; i < count; i++) {
var point = createRandomPointInCircle(centerPoint, radius);
var pos = proj.fromPointToLatLng(point);
//console.log(point);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: ''
});
}
}
function createRandomPointInCircle(centerPoint, radius) {
var angle = Math.random() * Math.PI * 2;
var x = (Math.cos(angle) * getRandomArbitrary(0, radius)) + centerPoint.x;
var y = (Math.sin(angle) * getRandomArbitrary(0, radius)) + centerPoint.y;
return new google.maps.Point(x, y);
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
google.maps.event.addDomListener(window, 'load', initMap);
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<div id="map"></div>
The example demonstrates how to draw a markers randomly inside a circle.

Google Maps API rotate Rectangle along its vertices

I have an application which has a rectangle on a google map at the certain point, I have to rotate the rectangle along the vertices as well as it should be editable, but the width of the rectangle should be always greater than its height.
I have seen several other solutions on stack overflow for rectangle rotation, there it is suggested to user polyline or polygon, but as I need angle difference of 90 between each side so I can't shift to other shapes.
Here is my code:
var rectangle;
var map;
var markers = [];
var north_east_degree=30;
var south_west_degree=210;
var center = new google.maps.LatLng(18.5021, 73.8774); // Circle center
map = new google.maps.Map(document.getElementById('map'), {
center: center,
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoom: 90,
heading: 90,
tilt: 45
});
var north_point=center.destinationPoint(north_degree, 0.08);
var east_point=center.destinationPoint(east_degree, 0.08);
var south_point=center.destinationPoint(south_degree, 0.08);
var west_point=center.destinationPoint(west_degree, 0.08);
var bounds = {
north: north_point.lat(),
east: east_point.lng(),
south: south_point.lat(),
west: west_point.lng()
};
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true,
strokeColor: "#000000",
strokeOpacity: 0.8,
fillOpacity: 0.5,
zIndex: -1
});
rectangle.setMap(map);
as there is no rotate event available for rectangle so for now I have used on click event:see image here
rectangle.addListener('click', rotate_rect);
initially, i get this result if i maintain angles as given above, at second iteration, every angle increases by 30 it then rectangle looks quite slanted the at third click rectangle changes to be as a single line as angle difference between each side is the very small I guess.
function rotate_rect(event)
{
var nor_east = rectangle.getBounds().getNorthEast();
var south_west = rectangle.getBounds().getSouthWest();
x1 = nor_east.lat();
x2 = south_west.lat();
y1 = nor_east.lng();
y2 = south_west.lng();
var cx= x1 + ((x2 - x1) / 2);
var cy = y1 + ((y2 - y1) / 2);
cx = cx.toPrecision(6);
cy= cy.toPrecision(6)
var center_rec = new google.maps.LatLng(cx,cy);
north_east_degree=north_east_degree+30;
south_west_degree=south_west_degree+30;
if(north_east_degree==180){
north_east_degree=30;
south_west_degree=210;
}
var newPointNorthEast=center_rec.destinationPoint(north_east_degree, calcCrow(center_rec.lat(),center_rec.lng(),nor_east.lat(),nor_east.lng()).toFixed(2));
var newPointSouthWest=center_rec.destinationPoint(south_west_degree, calcCrow(center_rec.lat(),center_rec.lng(),south_west.lat(),south_west.lng()).toFixed(2));
var bounds = {
north: newPointNorthEast.lat(),
south: newPointSouthWest.lat(),
east: newPointNorthEast.lng(),
west: newPointSouthWest.lng()
};
rectangle.setBounds(bounds);
}//rotate_rect

You cant properly rotate rectangle in Google Maps since google.maps.Rectangle object does not support to set/get coordinates of the four vertices (with setBounds function it is supported to set northeast and southwest coordinates only)
Instead you could consider the following solution:
create a polygon from a rectangle object and display it on the map
rotate a polygon
Working example
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.224,
west: -116.251
}
});
var rectPoly = createPolygonFromRectangle(rectangle); //create a polygom from a rectangle
rectPoly.addListener('click', function(e) {
rotatePolygon(rectPoly,10);
});
document.getElementById('btnRotate').onclick = function() {
window.setInterval(function() {
rotatePolygon(rectPoly, 10);
}, 500);
};
}
function createPolygonFromRectangle(rectangle) {
var map = rectangle.getMap();
var coords = [
{ lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getNorthEast().lng() },
{ lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
{ lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
{ lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getNorthEast().lng() }
];
// Construct the polygon.
var rectPoly = new google.maps.Polygon({
path: coords
});
var properties = ["strokeColor","strokeOpacity","strokeWeight","fillOpacity","fillColor"];
//inherit rectangle properties
var options = {};
properties.forEach(function(property) {
if (rectangle.hasOwnProperty(property)) {
options[property] = rectangle[property];
}
});
rectPoly.setOptions(options);
rectangle.setMap(null);
rectPoly.setMap(map);
return rectPoly;
}
function rotatePolygon(polygon,angle) {
var map = polygon.getMap();
var prj = map.getProjection();
var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point
var coords = polygon.getPath().getArray().map(function(latLng){
var point = prj.fromLatLngToPoint(latLng);
var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point,origin,angle));
return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
});
polygon.setPath(coords);
}
function rotatePoint(point, origin, angle) {
var angleRad = angle * Math.PI / 180.0;
return {
x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
};
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
<div id="floating-panel"><input type="button" id="btnRotate" value="Auto Rotate"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
JSFiddle

Labeling GoogleMaps Lat/Lng intersection

I create a map with latitude and longitude lines drawn every 1/4 min. The resulting boxes are called Quarter Minutes. I need to label each Quarter Minute box. The label should be the lat/lon of the SW corner inside the box. Since I draw all the latitude lines within the viewing area first, and then all the longitude lines, I cannot figure out how to find the intersect point. It would seem, that I would draw one(1) latitude line, and then one(1) longitude line and then label the intersect. I figure I can just use an info box at each point.
I do not know how to do this in JavaScript. Maybe it is not necessary to trap the intersection at the point of creation but that is the only way I would think it would happen.
The syntax for a QtrMin is
3040A8415A = intersect at 30 40' by 84 15'
3040A8415B = intersect at 30 40' by 84 15' 15"
3040A8415C = intersect at 30 40' by 84 15' 30"
3040A8415D = intersect at 30 40' by 84 15' 45"
or DDMM and A-> D to designate each quarter of minute.
Longitude and latitude are treated the same.
What I have is:
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<title>Find your Qtr minute locator</title>
</head>
<body style="height:100%;margin:0">
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var map;
var llOffset = 0.0666666666666667;
var drawGridBox = false;
var gridOverBox = new google.maps.Polyline({
path: [],
geodesic: true,
strokeColor: '',
strokeOpacity: 0,
strokeWeight: 0
});
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var smLngPolylines = [];
var lngLabels = [];
var lngMapLabel;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(34.00, -84.00),
zoom: 10,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
DrawGridOn();
google.maps.event.addListener(map, 'idle', function () {
createGridLines(map.getBounds());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function DrawGridOn() {
drawGridBox = true;
}
function DrawGridOff() {
drawGridBox = false;
}
function createGridLines(bounds) {
for (var i = 0; i < latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var i = 0; i < lngPolylines.length; i++) {
lngPolylines[i].setMap(null);
}
lngPolylines = [];
if (map.getZoom() < 10) return;
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north / llOffset) * llOffset;
var rightLong = Math.ceil(east / llOffset) * llOffset;
var bottomLat = Math.floor(south / llOffset) * llOffset;
var leftLong = Math.floor(west / llOffset) * llOffset;
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
</script>
</body>
</html>

Maybe it is not necessary to trap the intersection at the point of creation but that is the only way I would think it would happen
You draw straight lines with either equal latitudes or longitudes, so you may assume that the intersection of 2 lines:
latLine a: ay1,ax1 ay1,ax2
lngLine b: by1,bx1 by2,bx1
...is ay1,bx1
When the lines have been created iterate over them and create the labels based on the latitudes/longitudes:
//put the next 4 lines to the top of createGridLines
for(var i=0;i<lngLabels.length;++i){
lngLabels[i].setMap(null);
}
lngLabels=[];
//put this at the end of createGridLines
for(var x=0;x<latPolylines.length;++x){
for(var y=0;y<lngPolylines.length-1;++y){
var latLng=new google.maps.LatLng(latPolylines[x].getPath().getAt(0).lat(),
lngPolylines[y].getPath().getAt(0).lng());
lngLabels.push(new google.maps.Marker({
map:map,
position:latLng,
icon:{ url:'https://chart.googleapis.com/chart?'
+'chst=d_bubble_text_small&chld=bb|'
+ latLng.toUrlValue()
+'|FFFFFF|000000',
anchor:new google.maps.Point(0,42)
}
}));
}
}

Google Maps API Circle Intersect Detection

I'm trying to figure out of it's possible to detect when two Google Maps circles (around markers) intersect or bump into each other.
What I want to accomplish is, if two circles intersect, I want to raise an event. I'm not sure if this is possible though.

Calculate the distance between the centers of the circles, if it is less than the sum of the radius of the two circles, they intersect.
proof of concept fiddle
(based off of the code in Larry Dukek's answer, but using native Google Maps Javascript API v3 functions from the geometry library)
code snippet:
let map;
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 41.081301,
lng: -98.214219
},
zoom: 25
});
var c0 = new google.maps.Circle({
strokeColor: '#0000FF',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#0000FF',
fillOpacity: 0.2,
map: map,
center: {
lat: 41.082953,
lng: -98.215285
},
radius: 200
});
var c1 = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: {
lat: 41.081070,
lng: -98.214027
},
radius: 34.692866520
});
console.log("c1 & c0 hasIntersections returns:" + hasIntersections(c1, c0));
var c2 = new google.maps.Circle({
strokeColor: '#00FF00',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#00FF00',
fillOpacity: 0.2,
map: map,
center: {
lat: 41.083313,
lng: -98.211635
},
radius: 34.692866520
});
console.log("c2 & c0 hasIntersections returns:" + hasIntersections(c2, c0));
}
function hasIntersections(circle0, circle1) {
var center0 = circle0.getCenter();
var center1 = circle1.getCenter();
var maxDist = circle0.getRadius() + circle1.getRadius();
var actualDist = google.maps.geometry.spherical.computeDistanceBetween(center0, center1);
return maxDist >= actualDist;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Circles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly&channel=2" async></script>
</body>
</html>

Here is some JavaScript that will detect if two circles intersect
var e = Math; // shortcut for the mathematical function
var D2R = e.PI/180.0; // value used for converting degrees to radians
Number.prototype.toRadians = function() {
return this * D2R;
};
function distance(lat0,lng0,lat1,lng1){
// convert degrees to radians
var rlat0 = lat0.toRadians();
var rlng0 = lng0.toRadians();
var rlat1 = lat1.toRadians();
var rlng1 = lng1.toRadians();
// calculate the differences for both latitude and longitude (the deltas)
var Δlat=(rlat1-rlat0);
var Δlng=(rlng1-rlng0);
// calculate the great use haversine formula to calculate great-circle distance between two points
var a = e.pow(e.sin(Δlat/2),2) + e.pow(e.sin(Δlng/2),2)*e.cos(rlat0)*e.cos(rlat1);
var c = 2*e.asin(e.sqrt(a));
var d = c * 6378137; // multiply by the radius of the great-circle (average radius of the earth in meters)
return d;
}
function hasIntersections(circle0,circle1){
var center0 = circle0.getCenter();
var center1 = circle1.getCenter();
var maxDist = circle0.getRadius()+circle1.getRadius();
var actualDist = distance(center0.lat(),center0.lng(),center1.lat(),center1.lng());
return maxDist>=actualDist;
}
Just call hasIntersections with the references to your circles. Here is an example that showing two circles almost touching (returning false) and if you change the zero to a one in c1 they will touch (returning true).
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.081301, lng: -98.214219},
zoom: 25
});
var c0 = new google.maps.Circle({
strokeOpacity: .1,
strokeWeight: 1,
fillColor: '#0000FF',
fillOpacity: .2,
map: map,
center: {lat:41.082953, lng: -98.215285},
radius: 200
});
var c1 =new google.maps.Circle({
strokeOpacity: .1,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: .2,
map: map,
center: {lat:41.081070, lng: -98.214027},
radius: 34.692866520
});
console.log(hasIntersections(c1,c0));