I have a problem with a marker in leaflet. My code is this:
var updateMarker = function(lat, lng) {
if($('.leaflet-marker-icon').length)
marker.setLatLng([lat, lng]);
else
var marker = L.marker([lat, lng]).addTo(map);
return false;
};
var updateMarkerByInputs = function() {
return updateMarker( $('#latInput').val() , $('#lngInput').val());
}
$('#latInput').on('input', updateMarkerByInputs);
$('#lngInput').on('input', updateMarkerByInputs);
map.on('click', function(e) {
$('#latInput').val(e.latlng.lat);
$('#lngInput').val(e.latlng.lng);
updateMarker(e.latlng.lat, e.latlng.lng);
});
As you can see, on the first click will be add a marker and in the next clicks it should be updated. But I get this error at the second click:
TypeError: i is undefined
..."_leaflet_id";return function(i){return i[e]=i[e]||++t,i[e]}}(),invokeEach:funct...
leaflet.js (line 6, col 603)
What do I wrong?
You are defining your marker variable locally in the updateMarker function, so the reference is lost as soon as the function returns.
Define it outside the function:
var marker;
var updateMarker = function(lat, lng) {
if($('.leaflet-marker-icon').length)
marker.setLatLng([lat, lng]);
else
marker = L.marker([lat, lng]).addTo(map);
return false;
};
This way you don't need to check the DOM with jQuery to find out if your marker is defined, you can check directly the marker variable:
var marker;
var updateMarker = function(lat, lng) {
if (marker) {
marker.setLatLng([lat, lng]);
} else {
marker = L.marker([lat, lng]).addTo(map);
}
return false;
};
(to improve readability I would suggest to always use brackets in your if statements.)
Related
I have some objects with markers. These objects have dynamic data and I would like to output them in the infowindow of the marker of the object.
So far this is what I have:
function createRandomObjectWithAMarker() {
var marker;
var aData = "dataToDisplay";
var infowindow = new google.maps.InfoWindow({
content:callThisFunctionWhenOpenWindow(aData)
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
randomObject = {
/*
someData
*/
marker: marker
};
return randomObject;
}
And I would like that this function to be called when I click the marker to show the return modifiedData as the content of the infoWindow.
function callThisFunctionWhenOpenWindow(aData){
/*
do some stuff on aData
*/
return modifiedData;
}
But actually, this function is called once: only when I init the randomObject with the call of createRandomObjectWithAMarker(). So if I show the infoWindow after some time, when the datas would not be the same as when the script starter, it will still display the same output.
Is there any way to do that? If yes how?
Try something like this?
This way the infowindow (and it's data) is only created when you click the marker
function createRandomObjectWithAMarker() {
var marker;
var aData = "dataToDisplay";
marker.addListener('click', function() {
var infowindow = new google.maps.InfoWindow({
content:callThisFunctionWhenOpenWindow(aData)
});
infowindow.open(map, marker);
});
randomObject = {
/*
someData
*/
marker: marker
};
return randomObject;
}
I am trying to store the title of a clicked on Marker in a global variable using the following code:
var selectedUser; //returns undefined
function attachSecretMessage(marker, secretMessage) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener('click', function() {
infowindow.open(marker.get('map'), marker);
selectedUser = secretMessage;
console.log(selectedUser); //Gives title of selected marker
});
}
function selectedUser () {
document.write(selectedUser); // returns undefined
}
The following is how I am calling selectedUser() in HTML:
<div class="selectedUsername">
<h2><script type="text/javascript">selectedUser();</script></h2>
</div>
But I am only getting undefined returned. How can I fix this and be able to store the title of the clicked on Marker and access it somewhere else?
It actually does write it in the global var. And your console.log proves it. I think that your selectedUser() function executes before the click happens. That's why you have undefined.. Your click callback isn't executed yet. Try doing this (also changing names):
var selectedUser; //returns undefined
function writeSelectedUser () {
docment.getElementByTagName('h2')[0].innerHTML = secretUser;
}
function attachSecretMessage(marker, secretMessage) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener('click', function() {
infowindow.open(marker.get('map'), marker);
selectedUser = secretMessage;
writeSelectedUser();
console.log(selectedUser); //Gives title of selected marker
});
}
Or at least I believe it's a scope issue, correct me if I'm wrong.
I have a for loop that generates markers on my map. Each infowindow loads different content using callbacks to an ajax function.
I've simplified this sample to outline the problem.
var xhr = "";
var infowindow = new google.maps.InfoWindow();
var marker, i;
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
new google.maps.LatLng(-0.829439, -91.112473),
new google.maps.LatLng(15.066156, -23.621399),
]
function createHttpRequest() {
try {
xhr = new XMLHttpRequest();
return xhr;
}
catch (e)
{
//assume IE6
try {
xhr = new activeXBbject("microsoft.XMLHTTP");
return xhr;
}
catch (e) {
return alert("Unable to create an XMLHttpRequest object");
}
}
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(78.782762,17.917843),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
//I recreated the polylineCoordinates array (see above)
//to try and replicate and real array in the script
for (i = 0; i < polylineCoordinates.length; i++) {
marker = new google.maps.Marker({
position: polylineCoordinates[i],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent("<div id=\"infowindow\">" + getStationInfo(infoWindowDiv) + "</div>");
infowindow.open(map, marker);
}
})(marker, i));
} //End adding markers loop
function infoWindowDiv(stationInfo) {
var add = document.createTextNode(stationInfo);
document.getElementById("infowindow").appendChild(add);
}
function getStationInfo(callback) {
//createHttpRequest() exists globally
var xhr = createHttpRequest();
var url = "stations.php" //edited out the original URL
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var stationInfo = "This is a Test";
return callback(stationInfo)
} //end readyState
} //end readystatechange
xhr.open("GET", url, true);
xhr.send(null);
} //end getStationInfo
Small Edit: Moved functions outside of the loop
Edit 2: There is nothing wrong with the ajax call, the url was edited for the sake of the sample code. Notice the final output shows "This is a test" in the infowindow which clearly states a successful callback was performed. Moreover, notice there is no responseText or responseXml. The variable being sent back has nothing to do with the url
The callback works fine but for some reason it's topped with the dreadful 'undefined' on top of it.
Console shows nothing.
Output:
undefined
This is a test
What am I doing wrong? How can it be undefined if it works?
What is happening:
you click on the infowindow
getStationInfo(infoWindowDiv) is called, fires off an AJAX request, but returns nothing useful ("undefined", there is no return statement)
The AJAX function will encounter an error (url "Unnecessary at this point" will not cause the onreadystatechange function to fire). But you tell us that isn't a problem.
The script encounters the javascript error Uncaught TypeError: Cannot call method 'appendChild' of null because the div with id infowindow hasn't been attached to the DOM.
Suggest adding an event listener on the infowindow to not attempt to access the div with id="infowindow" until it has been rendered (domready).
Working code:
var xhr = "";
var infowindow = new google.maps.InfoWindow();
var map = null;
var marker, i;
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
new google.maps.LatLng(-0.829439, -91.112473),
new google.maps.LatLng(15.066156, -23.621399)
]
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(78.782762,17.917843),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
for (i = 0; i < polylineCoordinates.length; i++) {
marker = new google.maps.Marker({
position: polylineCoordinates[i],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent("<div id=\"infowindow\" style=\"height:50px;width:200px;\"></div>");
infowindow.open(map, marker);
google.maps.event.addListenerOnce(infowindow,"domready", function(){
getStationInfo(infoWindowDiv);
});
})(marker, i));
} //End adding markers loop
}
function infoWindowDiv(stationInfo) {
var add = document.createTextNode(stationInfo);
document.getElementById("infowindow").appendChild(add);
}
function getStationInfo(callback) {
var stationInfo = "This is a Test";
callback(stationInfo)
} //end getStationInfo
google.maps.event.addDomListener(window, 'load', initialize);
I'm working on a web app that integrates with google maps and I'm having an issue with zoom_changed event firing twice after calling fitBounds. The only reference I have to fitBounds is in updateMap. The only time I attach the event listener is in createMap.
The second call to the zoom changed handler is causing another trigger to update the map.
I've read this article already: Do not fire 'zoom_changed' event when calling fitBounds function on map
The flag is working fine for the first event. But why is there another zoom_changed event being fired?
Even better, how can I prevent the second zoom_changed event from firing?
Here is what I'm seeing in my console log:
updateMap, fitbounds: 0
calling fitbounds...
zoom changed
mapEventHandler, fitbounds: 1
zoom changed
mapEventHandler, fitbounds: 0
Here is the code for my update map function which calls fitBounds:
var mapZoomOrDragEventInProgress = false;
var fitBoundsCalledCount = 0;
var map = null;
updateMap = function () {
console.log("updateMap, fitbounds: " + fitBoundsCalledCount);
var bounds = fitBoundsForVenues();
deleteAndUpdateMarkers();
if (!mapZoomOrDragEventInProgress) {
bn.spg.map.vars.fitBoundsCalledCount++;
if (markers.length > 1) {
console.log("calling fitbounds...");
map.fitBounds(bounds);
} else {
console.log("setting zoom...");
map.setCenter(bounds.getCenter());
map.setZoom(13);
}
}
mapZoomOrDragEventInProgress = false;
}
Here is my create map function:
createMap = function() {
if (map === null) {
var bounds = fitBoundsForVenues();
var mapOptions = {
center: bounds.getCenter(),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'zoom_changed', zoomChangedEventHandler)
google.maps.event.addListener(map, 'dragend', dragendEventHandler);
}
}
Here is my event handler:
zoomChangedEventHandler = function () {
console.log("zoom changed");
console.log("mapEventHandler, fitbounds: " + fitBoundsCalledCount);
//we want to handle only user zoom events, NOT zoom_events triggered from fit bounds or set_zoom
if (fitBoundsCalledCount === 0) {
mapZoomOrDragEventInProgress = true;
var coords = getViewportCoordinates();
updateVenuesAndMapAsync(coords.lat, coords.lng, coords.radius);
} else {
fitBoundsCalledCount--;
}
}
I can't tell you where the 2nd zoom_changed-even has been triggered(I'm sure a single call of fitBounds() is not be the reason)
But instead of using these counters I would suggest to remove the zoom_changed-listener at the begin of updateMap() and to re-assign the listener at the end of updateMap()
I have a problem I've been trying to figure out for a while now.
There's a block of code that works fine, but then if I add some JQuery in it, it crash everything.
I get the following error : "Uncaught cannot call methods on gmap prior to initialization; attempted to call method 'addMarker"
The faulty code starts from "$.each(markersList.markers,"
Any help to point me out in the right direction would be greatly appreciated. Thanks !
function initialize() {
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.each(markersList.markers,
function(map, marker) {
var destination = (marker.lat + ', ' + marker.lng);
$('#map_canvas').gmap('addMarker',
{ 'position': new google.maps.LatLng(marker.lat, marker.lng), 'title': marker.title }, function(map, marker) {
$('#map_canvas').gmap('addInfoWindow',
{ 'content': null }, function(iw) {
$(marker).click(function() {iw.open(map, marker);
map.panTo(marker.getPosition());
$('#to').val(destination);
alert("You've selected " + marker.title + " as your destination. Please enter the origin");
});
});
});
});
if (navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
contentString = "Your location was found and has been added to starting point.";
map.setCenter(initialLocation);
$('#from').val(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
I had a similar issue with mine, what I did was create the initialize function as a separate function from the rest of the code, when the page loads I call Initialize() and at the end of the function I call searchLocations() which adds all of the markers to the map.