Below is a standard code taken from Google Map api V3 documentation. If you chnage the polygon options to editable and draggable, when you hover/click on the vertices of the polygon, you get the following error:
Uncaught TypeError: Cannot read property '__e3_' of null
The error is inconsistent in that it appears on an ad-hoc basis.
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.POLYGON,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },
polygonOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: true,
editable: true,
draggable:true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
drawingManager.setDrawingMode(null);
});
}
initMap();
Is this a bug in the api ?
Would appreciate any input on this matter.
Many thanks.
Related
I am trying to use google maps to allow a user to create multiple editabled/draggable polygons. Everything works fine from a desktop browser, but on a mobile/touch device all polygons are no longer draggable once a user adds a new polygon to the map. Polygons loaded on the map during initialize are draggable as expected.
I know touch events are not really supported by the google maps api, but is there a workaround I can do?
Simplified example:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
draggable: true
});
bermudaTriangle.setMap(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']
},
polygonOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
draggable: true,
zIndex: 10000
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
drawingManager.setOptions({
drawingMode: null
});
});
}
google.maps.event.addDomListener(window, 'load', initMap);
https://codepen.io/cyberjus/pen/XEVoer
Upon load from a mobile device, the first polygon is draggable, but once another polygon is drawn, neither can be dragged anymore. I am testing on an actual iPad, so I dont know if it is IOS specific or not.
I am using the sample from google map API to draw the circle and wanted to place the population value inside the circle for the plots can we do this in google map API
Example:https://developers.google.com/maps/documentation/javascript/examples/circle-simple
inside the ping circle as shown in the demo ,want to place the value of the population
One option is to use the InfoBox third party library to label the circles.
Proof of concept fiddle
code snippet:
// This example creates circles on the map, representing populations in North
// America.
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
zIndex: -100,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
var myOptions = {
content: "population<br>" + citymap[city].population,
boxStyle: {
background: '#FFFFFF',
color: '#000000',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(citymap[city].center.lat,
citymap[city].center.lng),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
// First, create an object containing LatLng and population for each city.
var citymap = {
chicago: {
center: {
lat: 41.878,
lng: -87.629
},
population: 2714856
},
newyork: {
center: {
lat: 40.714,
lng: -74.005
},
population: 8405837
},
losangeles: {
center: {
lat: 34.052,
lng: -118.243
},
population: 3857799
},
vancouver: {
center: {
lat: 49.25,
lng: -123.1
},
population: 603502
}
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>
I am trying to draw a rectangle by using a Custom Dom Element like
<button id="rect">Draw</button>
and here is the script which I am using
var drawingStyle = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true,
draggable: true,
};
google.maps.event.addListener(rect, 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
but clicking on the #rect is not causing any event! not even any error on the console. What am I doing wrong?
#rect is a DOM object. To listen for events on it with the Google Maps Javascript API v3 event listeners, use the addDomListener method.
<button id="rect">Draw</button>
google.maps.event.addDomListener(document.getElementById('rect'), 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
working code snippet:
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 45,
lng: -85
},
zoom: 4
});
}
google.maps.event.addDomListener(document.getElementById('rect'), 'click', function() {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
// rectangleOptions: drawingStyle,
map: map
});
drawingManager.setMap(map);
});
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="rect">Draw</button>
<div id="map-canvas"></div>
I have a problem with my marker in Google Maps. This is my code:
var map;
var geocoder;
var current;
var styles = [
{
stylers: [
{ hue: "#00c0eb" },
{ saturation: -10 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
}
];
var NewEventMarker;
function changeMarkerPosition(marker, ll) {
marker.setPosition(ll);
}
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({styles: styles});
google.maps.event.addListener(map, 'click', addNewEvent);
}
function codeAddress() {
var address = "London";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = new google.maps.MarkerImage("/img/markers/user-m.png",
new google.maps.Size(32.0, 49.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 24.0)
);
var marker = new google.maps.Marker({
map: map,
icon: image,
flat: false,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function addNewEvent(event){
var NEMlatLng;
if(NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "/img/markers/marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
google.maps.event.addListener(NewEventMarker,'dragend',function(event) {
alert(event.latLng);
});
}
The idea of this code is when user clicks on a map, start work function - addNewEvent, and as you can see, if there is already exists "NewEventMarker", it just moves this marker to a place where user clicks, and if there are no marker, it creates. So if you try my code you can see, that if i click, for example two or three times on a map, marker will moves, but when i drag my marker, starts work function that assigned to 'dragend' event. But it will be works so many times, how much i clicked on a map. How can i fix it?
When i try to add google.maps.event.addListener(NewEventMarker,'dragend'....... to other places in my code i get an error: Cannot read property '_e3' of undefined
Please help me ;)
Evgeny, you did almost everything right but for each click you attach new event handler for dragend. Because of that you got several dragend events and for each event one alert.
Solution is to just move event handler to if statement and add event listener only in case if NewEventMarker is created (only first time):
function addNewEvent(event){
var NEMlatLng;
if (NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
google.maps.event.addListener(NewEventMarker, 'dragend', function(event) {
alert(event.latLng);
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
}
Hey everyone anyone ever tried similar incident
its inside a jquery tab system and it works alone or any other place at the website but when inside a tab its getting this offset in some weird manner!
if you tried it or have a solution please post it
<% if (RentalCaseMap.Any()) { %>
<div id="Kort" class="tab-content">
<div id="rental_map_canvas" style="width:656px; height:270px"></div>
<script type="text/javascript" src="/scripts/rentalmap.js"></script>
</div>
<% } %>
....
<input type="hidden" id="HiddenGeoLat" value="<%=CurrentContent.GeoLat %>" />
<input type="hidden" id="HiddenGeoLng" value="<%=CurrentContent.GeoLng %>" />
Then script file
$(window).load(function () {
initialize();
});
function initialize() {
var jeudanStyles = [{ featureType: "all", elementType: "all", stylers: [{ saturation: -99}]}];
var jeudanMapType = new google.maps.StyledMapType(jeudanStyles,
{ name: "Jeudan" });
var myOptions = {
zoom: 16,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
};
if (document.getElementById("rental_map_canvas") != null) {
var map = new google.maps.Map(document.getElementById("rental_map_canvas"), myOptions);
map.mapTypes.set('jeudan_map', jeudanMapType);
map.setMapTypeId('jeudan_map');
var locations = [
{ lat: 55.680884, lng: 12.581577, content: '<div class="jeudanparkering">Addresse: Gammel Mønt 1 - 3<br />Mandag - lørdag 06.30-21.00.<br />Mere info...</div>' }
];
var marker, i;
var image = new google.maps.MarkerImage('/images/maps-logo-small.png', new google.maps.Size(35, 40), new google.maps.Point(0, 0), new google.maps.Point(35, 40));
var shadow = new google.maps.MarkerImage('/images/maps-logo-shadow-small.png', new google.maps.Size(74, 37), new google.maps.Point(0, 0), new google.maps.Point(34, 37));
var shape = {
coord: [1, 1, 1, 40, 35, 40, 35, 1],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng($("#HiddenGeoLat").val(), $("#HiddenGeoLng").val()), /*new google.maps.LatLng(locations[i].lat, locations[i].lng),*/
map: map,
shadow: shadow,
icon: image,
animation: google.maps.Animation.DROP,
shape: shape
});
marker.content = locations[i].content;
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
map.setCenter(marker.position);
}
};
}
You need to call google.maps.event.trigger(map, 'resize');
$("#liKort").click(function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(marker.position);
});