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);
}
});
}
Related
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();
});
}
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);
});
I searched a lot for solve this issue, but i can't resolve this issue. map show gray, see picture:
I test this event trigger:
google.maps.event.trigger(draw_map, "resize")
and in style
div {
overflow: hidden;
}
But, again doesn't work! This is initialize code for google map:
var draw_map = '';
var drawingManager;
var selectedShape;
var resc;
var rest;
var resx;
var resy;
jQuery(document).ready(function(){
initialize_draw_map();
});
function initialize_draw_map() {
if (draw_map != '')
return false;
var myLatlng = new google.maps.LatLng(90, 90);
var myOptions = {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
draw_map = new google.maps.Map(document.getElementById("map_canvas_draw_map"), myOptions);
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.30,
editable: true,
fillColor: '#1E90FF',
zIndex: 1
};
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE
]
},
polygonOptions: polyOptions,
rectangleOptions: polyOptions,
circleOptions: polyOptions,
map: draw_map
});
}
Loading libraries:
http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,drawing
in this page my another google map work as well.
This point var myLatlng = new google.maps.LatLng(90, 90); is at the North Pole. The tiles there are grey.
fiddle with your code
If I change the map options to a more reasonable place (in the US where there are non-grey tiles):
var myLatlng = new google.maps.LatLng(42, -90);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
I no longer get the "grey" map: working fiddle
working code snippet:
var draw_map = '';
var drawingManager;
var selectedShape;
var resc;
var rest;
var resx;
var resy;
jQuery(document).ready(function() {
initialize_draw_map();
});
function initialize_draw_map() {
if (draw_map != '')
return false;
var myLatlng = new google.maps.LatLng(42, -90);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
draw_map = new google.maps.Map(document.getElementById("map_canvas_draw_map"), myOptions);
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.30,
editable: true,
fillColor: '#1E90FF',
zIndex: 1
};
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE
]
},
polygonOptions: polyOptions,
rectangleOptions: polyOptions,
circleOptions: polyOptions,
map: draw_map
});
}
html,
body,
#map_canvas_draw_map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places,drawing&ext=.js"></script>
<div id="map_canvas_draw_map" style="border: 2px solid #3872ac;"></div>
Usually a grey map is caused by the wrong Google Maps API or deprecated function calls.
However it could also be the API KEY. Make sure you have a valid one.
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.