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.
Related
The InfoWindow is not displayed if I use it in a loop.
Here is an example of how to use it with Marker:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple
I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.
What am I missing?
function initMap() {
// Map settings, location : Barcelona, Spain
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.37, lng: 2.17},
zoom: 15,
mapTypeId: 'roadmap',
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true
});
// Circle distribution data : location, radius, data
let distribution = {
target_garden: {
center: {lat: 41.371400, lng: 2.171942},
population: 1,
data: `<div>Text 01</div>`
},
target_wtc: {
center: {lat: 41.373477, lng: 2.177650},
population: 2,
data: `<div>Text 02</div>`
}
};
// Display 2 red circles on map
let target;
for (target in distribution) {
let circle = new google.maps.Circle({
// colors
strokeColor: '#000',
strokeOpacity: .2,
strokeWeight: 3,
fillColor: '#f00',
fillOpacity: 0.5,
// position
map: map,
center: distribution[target].center,
radius: Math.sqrt(distribution[target].population) * 100,
// settings
draggable: false,
editable: false,
clickable: true
});
let infowindow = new google.maps.InfoWindow({
content: distribution[target].data
});
// Event : on click a circle open infowindow
circle.addListener('click', function () {
infowindow.open(map, circle);
console.log('on');
});
}
}
I expect a click on the red circle to open an InfoWindow.
The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:
open([map, anchor])
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the
core API, the only anchor is the Marker class. However, an anchor can
be any MVCObject that exposes a LatLng position property and
optionally a Point anchorPoint property for calculating the
pixelOffset (see InfoWindowOptions).
So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):
circle.addListener('click', function () {
infowindow.setPosition(circle.center)
infowindow.open(map);
});
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);
});
So my Google Maps API WAS working and now it's not. Looking through the documentation on Google's Maps API I don't see that anything has changed. We're using the maps embedded in a Wordpress PHP Template and everything I've checked seems to be right. Has something changed?
Here's the initial code:
<section id="main">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqnue6HpFD-HQvnk_cOKTQmqAzE6Xb9NQ"></script>
<script type="text/javascript" src="http://www.americanraceronline.com/wp-content/uploads/dev/markerwithlabel.js"></script>
<script type="application/javascript" >
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(40.6,-95.665);
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.Whitewater,
styles:[/lots of styles here/]};
var poly;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new MarkerWithLabel({
position: new google.maps.LatLng(40.27488643704891, -110.740234375),
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "WEST",
labelAnchor: new google.maps.Point(22, 2),
labelClass: "mylabels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: {}
});
The link to the page is: http://www.americanraceronline.com/distributors/
What am I missing?
In your browser console:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.main.js:60 yl
This does not need much explanation: you must be including the Google API repeated, check your includes to contain API reference only once.
Maybe file main.js, line:60 ??
For Google Maps mapOptions, zoom is required (see reference), e.g.
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
zoom: 9,
styles:[/lots of styles here/]
};
For example, I created a simple Fiddle of your code that did not work until zoom was provided.
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);
}
});
}