Im using Google map API V3 with drawing manager to add and save markers to the map. It works fine with the default drawing manager tools. I have the drawingMode set to null so it is inactive until the marker button is clicked - this works with the default set up.
I now have my own custom HTML button that when clicked it activates the drawing manager MARKER tool:
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
My Javascript is:
document.getElementById('add-event-button').onclick = function()
{
drawingMode: google.maps.drawing.OverlayType.MARKER;
}
But when it is clicked it does nothing, and returns 0 errors. I replaced
drawingMode: google.maps.drawing.OverlayType.MARKER;
with
alert("button was clicked ");
to see if it is reading the button click and it worked. So what should be added to activate the MARKER tool??
This works for me (and doesn't require jquery):
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
Working code snippet:
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: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
<div id="map-canvas"></div>
You probably need to do it via the drawingManager setOptions method, e.g.:
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
So in your case:
document.getElementById('add-event-button').onclick = function()
{
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
}
$("#add-event-button").click( function(){
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});
Related
I want to remove PolyLine drawing tool from Google maps API V3, Sorry if this is a silly question. I'm new to this, I've searched everywhere before asking it in here. Thank You.
I've added the image below for more clarity. I want to remove that tool from the options.
I'm using the below code to initialize the drawingManager
drawingManager = new google.maps.drawing.DrawingManager({
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: {
draggable: false,
label: ""
},
// polylineOptions: {
// editable: false,
// },
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
I get a javascript error with your posted code: ReferenceError: polyOptions is not defined.
You have a typo in your DrawingManager constructor, drawingModes belongs in the drawingControlOptions object (per the documentation) your code:
drawingManager = new google.maps.drawing.DrawingManager({
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,
],
should be:
var drawingManager = new google.maps.drawing.DrawingManager({
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,
],
},
(note the position of the closing } for drawingControlOptions)
proof of concept fiddle
code snippet:
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=drawing">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8,
});
var drawingManager = new google.maps.drawing.DrawingManager({
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: {
draggable: false,
label: ""
},
/* polyOptions is not defined... */
// rectangleOptions: polyOptions,
// circleOptions: polyOptions,
// polygonOptions: polyOptions,
map: map
});
drawingManager.setMap(map);
}
/* 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>Drawing Tools</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=drawing&v=weekly&channel=2" async></script>
</body>
</html>
Javascript/google maps beginner here.
I am looking for a simple way to calculate the area of a polygon the user draws on the map.
Code Snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53,
lng: 0
},
zoom: 13
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
<div>
<div id="map" style="width: 100%; height: 500px;"></div>
</div>
Use the google.maps.geometry.spherical.computeArea method
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area="+area.toFixed(2)+" sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.000581,
lng: -0.005
},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
var polygon = new google.maps.Polygon({
path: [{lat: 53.000842,lng: -0.004903},
{lat: 53.000823,lng: -0.004798},
{lat: 53.000779,lng: -0.004823},
{lat: 53.000799,lng: -0.004935}],
map: map
});
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area=" + area.toFixed(2) + " sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
drawingMode: null
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area=" + area.toFixed(2) + " sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
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"></div>
I created a simple map application (draw rectangle) using google maps. I have a Save button, when I draw a rectangle I save its coordinates. I also have Clear button that would only clear the unsaved rectangles. How do I work the Clear button where I will only remove the newly created rectangles? I worked with "rectangle.setMap(null)" but it seems that it removes all the rectangles (including the saved ones). Any help would be great!
Thanks.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10.487, lng: 123.975},
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
fillColor: '#00FF00',
strokeColor: "red",
strokeWeight: 2,
clickable: true,
editable: true,
draggable:true,
zIndex: 1,
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
drawingManager.setDrawingMode(null);
drawingManager.setOptions({
drawingControl: false //after drawing you cannot draw again, so you have to save it first
});
$("#btnSave").on('click', function(){
drawingManager.setOptions({
drawingControl: true
});
});
$("#btnClear").on('click', function(){ //when clicking Clear the saved rectangle must not be removed, only the newly created/unsaved rects
rectangle.setMap(null); //
drawingManager.setOptions({
drawingControl: true
});
});
document.getElementById("north_east").value = rectangle.getBounds().getNorthEast();
document.getElementById("south_west").value = rectangle.getBounds().getSouthWest();
});
}
I'm running into an issue when I add the DrawingManager functionality to Google Maps. When I call drawingManager.setMap(map) below, I lose the click event that I add at the bottom of the createMap function. When I comment out drawingManager.setMap(map), my click event works fine. I can't find any mention in the docs that would explain this behavior but I must be missing a step or doing something wrong.
Here is a basic version of the code that I'm using:
function createMap() {
window.center = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
window.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
window.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.POLYGON
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: true,
editable: true,
zIndex: 1
}
});
window.drawingManager.setMap(window.map);
google.maps.event.addListener(window.map, 'click', function(event){
console.log('clicked!');
});
}
Here it is the broken version that runs drawingManager.setMap(map):
http://jsfiddle.net/spencercarnage/4hD2S/3/
And without drawingManager.setMap(map), which properly console logs 'click's from the listener:
http://jsfiddle.net/spencercarnage/4hD2S/4/
Look like the Drawing Manager is consuming the click events. If you disable it when you are not using it, the click event works again. That might be expected, I don't know where it is documented.
Found the problem. Replace:
drawingMode: google.maps.drawing.OverlayType.MARKER
with:
drawingMode: google.maps.drawing.OverlayType.POLYGON
Rookie mistake.
I use google.maps.drawing.DrawingManager that seems like:
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
markerOptions: {
draggable: true,
optimized: false,
icon: new google.maps.MarkerImage('uxt/images/ap_gif.gif')
},
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: '#1E90FF',
strokeWeight: 0,
fillOpacity: 0.3,
editable: true
},
map: mapA
});
so my toolbar looks like:
As you see by default (after page reload) Marker is selected but i need "the hand" ('Stop drawing') to be selected.
How can I configure drawingManager to make this?
Thank you.
Just set drawingMode in options to null:
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
...
Please check with following code. if its not work then please check this post Google Maps API v3: Drawing Manager this might be helpfull
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if(event.type == google.maps.drawing.OverlayType.POLYLINE) {
alert("polyline complete");
}
else if(event.type == google.maps.drawing.OverlayType.MARKER) {
var newMarker = event.overlay;
newMarker.content = "marker #" + markers.length;
google.maps.event.addListener(newMarker, 'click', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
markers.push(newMarker);
}
});
}