I am working on Google Maps.
I have a situation in which the user enters a path on the Map using Drawing tools. I need to get the entire path of all points when user stops drawing the line.
So I have this code in JavaScript:
LoadDrawingToolsForDistance: function () {
var drawingManager = new google.maps.drawing.DrawingManager({
//drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYLINE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
},
});
drawingManager.setMap(MapObject);
google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
debugger;
alert('A');
});
}
The drawing tools is working fine. even I get alert('a') is been shown when line completed drawing.
This is the View of the event parameter in the function:
you can simply use overlaycomplete event to get this done.
<div id="map_canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing">
</script>
<script type="text/javascript">
</script>
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-37.84232584933157, 145.008544921875),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
]
},
polygonOptions: {
strokeColor: '#75ad3e',
fillColor: '#75ad3e',
fillOpacity: 0.35,
strokeWeight: 2,
clickable: true,
editable: true,
draggable:true
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (OverlayCompleteEvent) {
var bounds = OverlayCompleteEvent.overlay.getPath().getArray();
console.log(bounds);
alert(bounds.toString());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
To retrieve the points of the polyline on the map you can use this
google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
console.log(event.getPath().getArray());
});
This will print out all the points in the polyline.
Related
I make polygon drawing on my map.
Here is function for drawingManager
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: 'green',
fillOpacity: 0.4,
strokeWeight: 1,
clickable: true,
zIndex: 1,
editable: false
}
});
I need to calculate bounds for polygon. I read, that I cannot do it via .getBounds like with square.
So I found here answer
I tried one of answers.
So now my code looks like this.
drawingManager.addListener('polygoncomplete', function (polygon) {
var bounds = new google.maps.LatLngBounds();
polygon.forEach(function (feature) {
if (feature.getGeometry().getType() === 'Polygon') {
feature.getGeometry().forEachLatLng(function (latlng) {
bounds.extend(latlng);
});
}
});
console.dir(bounds);
});
and in console I get this error.
Index.js:1673 Uncaught TypeError: polygon.forEach is not a function
at this row polygon.forEach(function (feature) {
Where is problem and how I can solve it?
See the documentation:
A polygon has a .getPaths() method, which returns a MVCArray of LatLng objects.
drawingManager.addListener('polygoncomplete', function(polygon) {
var bounds = new google.maps.LatLngBounds();
polygon.getPaths().forEach(function(path) {
path.forEach(function(latlng) {
bounds.extend(latlng);
map.fitBounds(bounds);
});
});
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var drawingManager = new google.maps.drawing.DrawingManager({
map: map,
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: 'green',
fillOpacity: 0.4,
strokeWeight: 1,
clickable: true,
zIndex: 1,
editable: false
}
});
drawingManager.addListener('polygoncomplete', function(polygon) {
var bounds = new google.maps.LatLngBounds();
polygon.getPaths().forEach(function(path) {
path.forEach(function(latlng) {
bounds.extend(latlng);
map.fitBounds(bounds);
});
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
While it's not documented here:
https://developers.google.com/maps/documentation/javascript/reference/polygon
The Google Maps API for Polygons does have a getBounds() method.
The API documentation should be updated to include:
getBounds()
Parameters: None
Return Value: LatLngBounds
Returns the bounds of the Polygon.
\\ define map up here, draw polygons
let bounds = polygon.getBounds();
let rect = new google.maps.Rectangle({
bounds: bounds,
map: thisMap
});
I am not using listener in my code then How can I get each co-ordinates points from drawing?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon', 'polyline']
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
fiddle: https://jsfiddle.net/31aey9mk/
I've updated your fiddle here.
Basically, you need to pass an array of google.map.drawing.OverlayTypes of the type you wish you use. In this case, I've added a marker and polygon.
Then, you need to add an event handler in the initMap() method for capturing when the drawing has been completed:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event)
{
if (event.type === 'marker') console.log('Lat: ' + event.overlay.position.lat() + ', Long: ' + event.overlay.position.lng())
else console.log(event.overlay.getPath().b);
});
Which grabs the event and the shape/marker which was drawn.
var drawingManager;
var lastShape;
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 3,
center: new google.maps.LatLng(-25.165, 133.769),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var shapeOptions = {
strokeWeight: 1,
strokeOpacity: 1,
fillOpacity: 0.2,
editable: true,
draggable: true,
clickable: false,
strokeColor: '#3399FF',
fillColor: '#3399FF'
};
// create marker
var m1 = new google.maps.Marker({
position: new google.maps.LatLng(-25.165, 133.769),
map: map,
title: 'Hello Australia!'
});
// create a drawing manager attached to the map to allow the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: shapeOptions,
circleOptions: shapeOptions,
Options: shapeOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
if (lastShape != undefined) {
lastShape.setMap(null);
}
// cancel drawing mode
if (shift_draw == false) {
drawingManager.setDrawingMode(null);
}
lastShape = e.overlay;
lastShape.type = e.type;
lastBounds = lastShape.getBounds();
$('#bounds').html(lastBounds.toString());
// determine if marker1 is inside bounds:
if (lastBounds.contains(m1.getPosition())) {
$('#inside').html('Si!');
} else {
$('#inside').html('No...');
}
});
var shift_draw = false;
$(document).bind('keydown', function (e) {
if (e.keyCode == 16 && shift_draw == false) {
map.setOptions({
draggable: false,
disableDoubleClickZoom: true
});
shift_draw = true; // enable drawing
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
}
});
$(document).bind('keyup', function (e) {
if (e.keyCode == 16) {
map.setOptions({
draggable: true,
disableDoubleClickZoom: true
});
shift_draw = false // disable drawing
drawingManager.setDrawingMode(null);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
body {
background: #f5f5f5 url('../images/bg.jpg') no-repeat left top;
}
.google-maps {
position: relative;
height: 0;
padding-bottom: 25%;
}
#gmap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div class="google-maps"><div id="gmap"></div></div>
<div id="panel">
<p>Presiona shift par dibujar un rectángulo, o selecciona la opción desde el menú de controles superior
<br/></p>
<b>Está el marker en el area?:</b>
<p id="inside">...</p>
<b>Coordenadas:</b>
<p id="bounds">...</p>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I am using this code:
map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 3,
center: new google.maps.LatLng(-25.165, 133.769),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var shapeOptions = {
strokeWeight: 1,
strokeOpacity: 1,
fillOpacity: 0.2,
editable: true,
draggable: true, /* It doesn't seem to work */
clickable: false,
strokeColor: '#3399FF',
fillColor: '#3399FF'
};
// create marker
var m1 = new google.maps.Marker({
position: new google.maps.LatLng(-25.165, 133.769),
map: map,
title: 'Hello Australia!'
});
// create a drawing manager attached to the map to allow the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: shapeOptions,
circleOptions: shapeOptions,
Options: shapeOptions,
map: map
});
to let the user draw a rectangle or a circle,
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
if (lastShape != undefined) {
lastShape.setMap(null);
}
// cancel drawing mode
if (shift_draw == false) {
drawingManager.setDrawingMode(null);
}
lastShape = e.overlay;
lastShape.type = e.type;
});
Which seems to work, except the draggable: true because, Once I drag the shape, it disappears.
Any idea why?
If you set "clickable" to true, you will be able to drag the shape:
var shapeOptions = {
strokeWeight: 1,
strokeOpacity: 1,
fillOpacity: 0.2,
editable: true,
draggable: true,
clickable: true,
strokeColor: '#3399FF',
fillColor: '#3399FF'
};
This code is hiding the shape when you click on it:
google.maps.event.addListener(map, 'mousedown', function () {
if (lastShape != undefined) {
lastShape.setMap(null);
$('#inside').html('...');
$('#bounds').html('...');
}
});
I already create a polygon and draggable marker, but my problem is if the marker is inside in the polygon, it will alert "NO", it should be "YES"? My code is here:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry"></script>
<script type="text/javascript">
function initialize() {
var coor = [];
var mapOptions = {
center: new google.maps.LatLng(7.0704771, 125.608522),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var dragable_marker = new google.maps.Marker({
position : new google.maps.LatLng(7.0704771, 125.608522),
map : map,
draggable : true,
title: "Your customer location"
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.NONE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
icon: 'img/pin.png'
},
polygonOptions: {
fillColor: '#66d9ef',
fillOpacity: 0.5,
strokeColor: '#1A8BD6',
strokeWeight: 2,
clickable: true,
editable: false,
draggable: false,
zIndex: 1
}
});
drawingManager.setMap(map);
var created_poly = new google.maps.Polygon({path:coor,
map: map,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
drawingManager.setDrawingMode(null);
var arr=[];
polygon.getPath().forEach(
function(latLng){
arr.push(latLng.toString());
}
)
coor = arr.join(',\n');
drawingManager.setOptions({
drawingControl: false,
});
});
google.maps.event.addListener(dragable_marker,"dragend", function() {
if(google.maps.geometry.poly.containsLocation(dragable_marker.getPosition(), created_poly) == true) {
alert("yes"); // if marker is inside in polygon
} else {
alert("no"); // if marker is outside in polygon
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#map-canvas{
height: 300px;
}
</style>
<body>
<div id="map-canvas"></div>
</body
What is my error?
One algorithm to solve this is point in polygon. See an explanation http://en.wikipedia.org/wiki/Point_in_polygon
And you can find code implementing this for the Google Maps JS API V3 here:https://github.com/tparkin/Google-Maps-Point-in-Polygon
I'm using this exmaple from https://developers.google.com/maps/documentation/javascript/examples/drawing-tools to enable user to choose a point and enable user to draw a circle around it.
However, I need also to:
get the lat/lang of center of circle that user draw.
get the radius of circle.
also the code allows user to draw more than one circle, if possible, I need to restrict user to draw only one circle, if user draw another circle, first circle should be removed.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
See http://jsfiddle.net/stevejansen/2HpA6
(function () {
var circle;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
}
function onCircleComplete(shape) {
if (shape == null || (!(shape instanceof google.maps.Circle))) return;
if (circle != null) {
circle.setMap(null);
circle = null;
}
circle = shape;
console.log('radius', circle.getRadius());
console.log('lat', circle.getCenter().lat());
console.log('lng', circle.getCenter().lng());
}
google.maps.event.addDomListener(window, 'load', initialize);
})();
GoogleMap map;
// Add a circle in Sydney
Circle circle = map.addCircle(new CircleOptions()
.center(new LatLng(-33.87365, 151.20689))
.radius(10000)
.strokeColor(Color.RED)
.fillColor(Color.BLUE));
<-- to get radius of any location in map, use this code. It shows the radius value from center of map to x and y coordinates.-->
Toast.makeText(app.getBaseContext(),***[circle.getRadius()][1]***,
Toast.LENGTH_SHORT).show();