How to remove Drawing layer menu options?
I am using the script below but I want remove the highlighted options in the image below.
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.21&sensor=false&libraries=drawing"></script>
I want these only, but the map shows more then three.
var RECTANGLE = google.maps.drawing.OverlayType.RECTANGLE;
var CIRCLE = google.maps.drawing.OverlayType.CIRCLE;
var POLYGON = google.maps.drawing.OverlayType.POLYGON;
remove highlighted option
You can't (easily) remove the hand (if you want to do that, you need to make your own custom control).
To only show the three you want, plus the hand, in the API control only include the ones you want in the drawingModes property of the drawingControlOptions for the map:
code snippet: (based off the example in the documentation)
// 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=YOUR_API_KEY&libraries=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: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.RECTANGLE]
},
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
Related
Hi i have a problem with rotating a mark, roation works fine but it changes its position when its rotated, is there any way to fix this
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
The rotation for an SVG symbol is around the anchor position. The default anchor for an SVG Symbol is the upper left corner. To rotate the marker around the center, set the anchor to be the center of the image, which for your icon is:
anchor: new google.maps.Point(13, 13)
complete marker definition:
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
anchor: new google.maps.Point(13, 13)
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
proof of concept fiddle
code snippet:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 51.9189046, lng: 19.1343786 },
zoom: 15,
});
var ptMarker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
anchor: new google.maps.Point(13, 13)
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
var angle = 0;
setInterval(function() {
angle += 10;
var image = aircraft.getIcon();
image.rotation = angle;
aircraft.setIcon(image);
}, 500)
}
window.initMap = initMap;
/*
* 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>Simple Map</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>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
I'm trying to change few options of Google Maps drawing manager by clicking a button using Angular. But I receive error messages saying that DrawingManager variable is undefined.
I initialized Google Maps and DrawingManager in ngAfterViewInit function in an Angular Component. Google Map object and the Drawing Manager object are assigned to variables in the component as shown in the code. I want to change the few options of Drawing Manager by Clicking a button in the component. "drawControlEnable" function is called by clicking the button. But DrawingManager object is undefined inside the "drawControlEnable" function. I have put the Google Maps Script in the index.html and the code for the component.
Index.html
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=drawing,geometry"></script>
Angular Component
import {Component, OnInit, ViewChild, AfterViewInit} from '#angular/core';
import { } from '#types/googlemaps';
.....
.....
#ViewChild('gmap') gmapElement: any;
map: google.maps.Map;
shapes = [];
coordinatesArray = [];
drawingManager: any;
ngAfterViewInit() {
var mapProp = {
center: new google.maps.LatLng(7.515073, 80.723066),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
polygonOptions: {
editable: true,
draggable: true
}
});
this.drawingManager.setMap(this.map);
}
.....
.....
drawControlEnable() {
this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
this.drawingManager.setOptions({drawingControl : true});
}
How I can change DrawingManager options by clicking a button?
This is how i create a map and change the drawing control option with a button:
First I declare two variables: one for the map and one for the drawingManager
theMap: any;
drawingManager: any;
the I create the map in ngOnInit and call the drawingManager:
this.theMap = this.initMap(lat, lng);
if(this.theMap) {
this.initDrawingManager(this.theMap)
}
the two functions for creating the map and initializing the drawing manager are:
initMap(lat, lng) {
let mapProp = {
center: new google.maps.LatLng(lat, lng),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
let map = new google.maps.Map(document.getElementById("map"), mapProp);
let marker = new google.maps.Marker({
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
animation: google.maps.Animation.DROP,
position: { lat: lat, lng: lng },
map: map
})
return map;
}
and
initDrawingManager(map) {
this.drawingManager = new google.maps.drawing.DrawingManager({
// drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['circle', 'polygon']
},
// markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
polygonOptions: {
draggable: true,
editable: true
},
circleOptions: {
// fillColor: '#ffff00',
// fillOpacity: 1,
// strokeWeight: 5,
draggable: true,
clickable: true,
editable: true,
zIndex: 1
}
});
this.drawingManager.setMap(map);
}
The function that changes the drawingControl option is:
change() {
this.drawingManager.setOptions({
drawingControl: true
});
}
and the HTML is:
<button
(click)="change()">
change
</button>
By clicking the button, the drawing controls will appear on the map.
Our difference is that I create the map in ngOnInit.
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 using the google maps Drawing Layer (Library) to draw shapes on my map.
Once finished drawing all the shapes I call "toGeoJson" function from the google maps api.
The object i receive look like this:
object received when calling "toGeoJSON"
I can't figure out what I'am doing wrong.
I am just trying to create a GeoJson out of the shapes drawn on the map.
I am not pasting any code because the drawing part is all done by the drawing library and the "toGeoJson" function is done by the google maps API.
There is no toGeoJSON method on the drawing manager, that only exists on the Data class
Drawing objects on the map with the drawing manager doesn't add them to the DataLayer.
You can add the objects from the drawing manager to the Data Layer, then call toGeoJson on that.
To prevent adding duplicate objects to the map, use a separate Data object, rather than the one on the map.
proof of concept fiddle
(some code from the related question: Export geoJSON data from Google Maps)
code snippet:
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: [
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: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
var dataLayer = new google.maps.Data();
// from https://stackoverflow.com/questions/25072069/export-geojson-data-from-google-maps
// from http://jsfiddle.net/doktormolle/5F88D/
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
switch (event.type) {
case google.maps.drawing.OverlayType.MARKER:
dataLayer.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Point(event.overlay.getPosition())
}));
break;
case google.maps.drawing.OverlayType.RECTANGLE:
var b = event.overlay.getBounds(),
p = [b.getSouthWest(), {
lat: b.getSouthWest().lat(),
lng: b.getNorthEast().lng()
},
b.getNorthEast(), {
lng: b.getSouthWest().lng(),
lat: b.getNorthEast().lat()
}
]
dataLayer.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Polygon([p])
}));
break;
case google.maps.drawing.OverlayType.POLYGON:
dataLayer.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
}));
break;
case google.maps.drawing.OverlayType.POLYLINE:
dataLayer.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray())
}));
break;
case google.maps.drawing.OverlayType.CIRCLE:
dataLayer.add(new google.maps.Data.Feature({
properties: {
radius: event.overlay.getRadius()
},
geometry: new google.maps.Data.Point(event.overlay.getCenter())
}));
break;
}
});
google.maps.event.addDomListener(document.getElementById('save'), 'click', function() {
dataLayer.toGeoJson(function(obj) {
document.getElementById('geojson').innerHTML = JSON.stringify(obj);
});
})
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="save" value="save" type="button" />
<div id="geojson"></div>
<div id="map"></div>
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.