"dragend" method for marker in Google Maps - google-maps

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);
}
}

Related

How to automatically remove markers depending on Boolean value in JSON file

I have a JSON file:
[
{
"id": 1,
"city": "Milan",
"availability": true,
"lat": 45.4655,
"long": 9.1865,
"marker": "example.png"
},
{
"id": 2,
"city": "Berlin",
"availability": true,
"lat": 52.520008,
"long": 13.404954,
"marker": "example.png"
},
{
"id": 3,
"city": "Paris",
"availability": false,
"lat": 48.864716,
"long": 2.349014
}
]
What happens so far is if a city has "availability": true then the "marker" within the JSON file appears on my map. However the other city's that have "availability": false are showing the Google Maps red marker on my map when I don't want any marker to show if the "availability": false.
This is my code so far:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.520008, 13.404954),
disableDefaultUI: true,
zoom: 2
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$.getJSON('example.com', function(data) {
$.each(data, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});
});
}
Any help on how to remove these Google Maps Red Markers on a city with "availability": false would be great. Thanks in advance.
Check for the value in the loop, also you don't need a variable assigned the marker, it get's lost in the loop anyways.
$.getJSON('example.com', function (data) {
$.each(data, function (i, value) {
// Don't create a marker if field is false
if (value.availability === false) {
return;
}
// No variables used
new google.maps.Marker({
position: new google.maps.LatLng(value.lat, value.long),
icon: value.marker,
map: map
});
});
});
const filtered = data.filter(item => item.availability);
$.each(filtered, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});

Googlemaps V3 - Draggable Polygon Error

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.

Google Maps Icon is not showing on website

I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

google maps api - heatmap.set(data) property

I am creating a simple google map with heatmap layer. Importantly, I am not setting the data property of the heatmap initially:
var map, heatmap;
var home = new google.maps.LatLng(37.75, -122.4)
function initialize() {
var mapOptions = {
zoom: 10,
minZoom: 3,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
var styles = [
{
stylers: [
{ "gamma": 0.83 },
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.setOptions({styles: styles});
heatmap = new google.maps.visualization.HeatmapLayer({
radius: 20,
opacity: 0.5
});
heatmap.setMap(map);
then I create a function which should set the data property of the heatmap, like this:
function update(){
all = [[37.782551, -122.445368, 0.75, 0.25],
[37.782745, -122.444586, 0.5, 0.5],
[37.782842, -122.443688, 0.2, 0.8]]
temp = []
for (var i = 0; i < all.length; i++){
temp.push(new google.maps.LatLng(all[i][0], all[i][1]), all[i][2])
}
var newdata = new google.maps.MVCArray(temp);
heatmap.set('data', heatmap.get('data') ? null : newdata)
}
finally, i call the update function in a bounds_changed event and initialize the map:
google.maps.event.addListener(map, 'bounds_changed', function() {
update;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
However, when I inspect the heatmap variable in the console, the data property is null. Why is this? and how do I set the data property in a function call?
calling heatmap.set('data', heatmap.get('data') ? null : newdata); is problematic.
Remove that and it works.
working fiddle

Googlemaps getting offset

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);
});