I'm working on an application centered around Google Maps and for one of the features the user will input a series of clicks in order to create a polygon. I would like to do something with the information after the clicks but I don't know how to accomplish this without setTimeout() which wouldn't work due to the variable amount of time it could take the users to create the polygon.
Currently my code is structured as such (with help from one of the answers on the question Draw polygon using mouse on google maps.
let polygons = [];
$('.set-polygon').click(function () {
let isClosed = false;
let poly = new google.maps.Polyline({
map: map,
path: [],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
google.maps.event.addListener(map, 'click', function (e) {
if (isClosed) {
return;
}
let markerIndex = poly.getPath().length;
let isFirstMarker = markerIndex === 0;
let marker = new google.maps.Marker({
map: map,
position: e.latLng,
draggable: true
});
if (isFirstMarker) {
google.maps.event.addListener(marker, 'click', function () {
if (isClosed) {
return;
}
let path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({
map: map,
path: path,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
isClosed = true;
});
}
google.maps.event.addListener(marker, 'drag', function (e) {
poly.getPath().setAt(markerIndex, e.latLng);
});
poly.getPath().push(e.latLng);
let params = {
name: "Polygon1",
poly: poly
};
polygons.push(params);
console.log(polygons);
});
});
Related
In my rails application I have implemented a google maps using the polygon drawing tool. I have been able to add coordinates and save these to my database successfully.
The problem i'm having is when a user wants to edit and save any changes made to the polygon shape. How do i implement this function? My best guess is to use a conditional to see if the database has any saved coordinates, if so, load them in a listener?
HTML
<div style='width: 100%;'>
<%= hidden_field_tag(:map_coords, value = nil, html_options = {id: 'propertyCoordinates'}) %>
Javascript
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -40.6892, lng: 74.0445 },
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID,
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
};
// loads databased saved coordinates
var propertyCoords = [<%= #property.coordinates %>];
var points = [];
for (var i = 0; i < propertyCoords.length; i++) {
points.push({
lat: propertyCoords[i][0],
lng: propertyCoords[i][1]
});
}
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ["polygon"]
},
polylineOptions: {
editable: true,
draggable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
if (typeof points !== 'undefined') {
// My guess is to use a conditional statement to check if the map has any coordinates saved?
} else {
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
if (e.type !== google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function (e) {
if (e.vertex !== undefined) {
if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
var path = newShape.getPaths().getAt(e.path);
path.removeAt(e.vertex);
if (path.length < 3) {
newShape.setMap(null);
}
}
}
setSelection(newShape);
});
}
var coords = e.overlay.getPath().getArray();
document.getElementById("propertyCoordinates").value = coords;
});
}
} // END function initMap()
If I understand correctly, what you're looking for is the polygon editing functionality. My stackblitz example goes something like this:
Draw a polygon if you already have user-saved coordinates. Then fit the map bounds to the poly's bounds. For this you'll probably need a getBounds polyfill.
Make the polygon editable so you can listen to its points' changes. Check the function enableCoordinatesChangedEvent.
Listen to the changes & extract the new polygon points. Look for function extractPolygonPoints.
Then proceed with your business logic.
FYI you'll need to put your own API key at the bottom of the stackblitz index.html. Look for YOUR_KEY.
i'm creating a Marker layer on my Google Map, and then adding pins. These get added to this layer. I want to add a hover effect which is basically a circle behind the pin.
I was going to just use CSS, however I can't add a before or after to the image, so I need to get the parent element and add it to this. However the Google Maps API doesn't give you access to the Pin element.
var markerLayer = new google.maps.OverlayView();
markerLayer.draw = function () {
this.getPanes().markerLayer.id='markerLayer';
};
markerLayer.setMap(_.map);
// Create pin and store it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
icon: marker,
title: location.name,
optimized: false
});
_.markers.push(marker);
Below is a screenshot of what the marker object contains, and as you can see there is no reference to the HTMLElement.
My only though was to search the #markerLayer div for images and storing them, assuming that these will appear in the same order as they are added to the _.markers property.
Or would a better way be to create a Circle using the API and putting it in the same position as the pin?
I used the Google Maps Circle to create a circle shape, when hovering to markers.
here is the link to doc:
(https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
Check this addMarker function
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function(){
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
I made a simple app, that will add markers by clicking on the map.
Check this working example: http://jsbin.com/nukecog/2/edit?html,js,output
var map;
var markers = [];
var circles = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {
lat: 0,
lng: 0
}
});
map.addListener('click', function(e) {
addMarker(e.latLng);
});
}
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function() {
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap">
</script>
</body>
</html>
I am studying C# , google map api. and i want to draw click rectangle and calculate rectangle area.
this is my code:
function mode() {
google.maps.event.addListener(map, 'click', function (event) {
var bounds = makeBounds(event.latLng, 200, 100);
placeRec(bounds);
});
}
function placeRec(bounds) {
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
editable: true,
bounds: bounds,
draggable:true
});
}
function makeBounds(nw, metersEast, metersSouth) {
ne = google.maps.geometry.spherical.computeOffset(nw, metersEast, 90);
sw = google.maps.geometry.spherical.computeOffset(nw, metersSouth, 180);
return new google.maps.LatLngBounds(sw, ne);
sowe = bounds.getSouthWest();
noea = bounds.getNorthEast();
}
I succeed draw click Rectangle in google map,
I want to know calculate Rectangle Area.
How do i have to do?
Thank you
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
I have successfully bound a circle to my marker using google map api v3. I know this because if I make the marker dragable the circle moves as well.
How can I refer to the circle if the marker is clicked. I need to show the circle if not visible or vice-versa.
Here is the code to create the marker and circle
var markerOptions = {
title: title,
icon: markerImage,
shadow: markerShadow,
position: latlng,
map: map
}
var marker = new google.maps.Marker(markerOptions);
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
//circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
I found an answer on stackoverflow that led me to think I needed to do the rem'd out map binding as well the center binding, but that did not work.
Here is my click event for the marker.
google.maps.event.addListener(marker, "click", function() {
var infowindowOptions = {
content: html
}
var infowindow = new google.maps.InfoWindow(infowindowOptions);
cm_setInfowindow(infowindow);
infowindow.open(map, marker);
marker.setIcon(markerImageOut);
marker.circle({visible: true});
Any ideas. I need to interact with the bound circle of the marker that was just clicked or moused over.
One option is to make the circle a property of the marker (like ._myCircle), reference it in the click handler as marker._myCircle.
Add the circle as the _myCircle property of marker:
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
circle.bindTo('center', marker, 'position');
marker._myCircle = circle;
To toggle it use something like (not tested):
if(marker._myCircle.getMap() != null) marker._myCircle.setMap(null);
else marker._myCircle.setMap(map);
var rad =".$this->conf['radius'] * 1000 ."; //convert km to meter
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,//map object
center: new google.maps.LatLng($corr_match[0], $corr_match[1]),//center of circle
radius: rad
};
var cityCircle = new google.maps.Circle(populationOptions);