The problem:
mouseout event fires too early and causes the infobox to stay open when the user drags their mouse over the marker too fast. In other words... If the user quickly moves in and out of the marker... the mouseover event fires, then the mouseout event fires ... but then, the placesService callback is executed and ib.open() is called.
The code:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var request = {
key: 'for_my_eyes_only',
location: new google.maps.LatLng(some_lat, some_lng);,
radius: '500',
types: ["restaurant"]
};
var service = new google.maps.places.PlacesService(map);
service.search(request, placesCallback);
function placesCallback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
});
//Infobox settings
var ib = new InfoBox({
//a bunch of irrelevant properties.
});
google.maps.event.addListener(marker, 'mouseover', markerMouseOverFactory(place, marker, ib));
google.maps.event.addListener(marker, 'mouseout', markerMouseOutFactory(ib));
}
}
}
function markerMouseOverFactory(place, marker, ib){
return function(){
var detailService = new google.maps.places.PlacesService(map);
detailService.getDetails({reference: place.reference}, function(details, status){
if (status == google.maps.places.PlacesServiceStatus.OK) {
ib.setContent(/*set some content using details*/);
ib.open(map, marker);
}
});
}
}
function markerMouseOutFactory(ib){
return function(){
ib.close();
}
}
The question:
Is there a way to abandon a google maps AJAX request? If I could abandon the AJAX request in the mouseout listener, all would be good. Or, how would you solve this? I tried using a simple flag in the mouseout, but couldn't get it working.
There is no method to cancel the request in the API as far as I know. But what I would do is to delay the callback executed inside the mouseover event. So that if the user holds the mouse longer than a specified time; it would mean he/she wants the infobox displayed.
Workaround:
var delayTimer, delay = 800; //less than 1 sec. delay
google.maps.event.addListener(marker, 'mouseover', function() {
delayTimer = setTimeout(function() {
markerMouseOverFactory(place, marker, ib);
}, delay);
});
google.maps.event.addListener(marker, 'mouseout', markerMouseOutFactory(ib));
function markerMouseOutFactory(ib){
clearTimeout(delayTimer); //clear timeout here
return function(){
ib.close();
}
}
Related
I would like to exit onclick, I've tried this code here, but I want it to be one click, placing one marker, not one click, infinite markers.
document.getElementById("addWater").onclick = function()
{
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
infoWindow.setPosition(pos);
}
}
Are you talking about mimicking the "once" function in jquery? Maybe you could try this approach
var a = false;
document.getElementById("addWater").onclick = function () {
if (!a) {
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
infoWindow.setPosition(pos);
}
a = true;
}
}
I have used Bing Maps AJAX Control, Version 7.0. and shows the Pins on map. the requirement is like, user can drag and drop the pin and when pin gets drop, it should move to its actual location.
now the issue is, when pin's dragend event called, pin successfully set to its original location, but the mouse is not released and when mouse move, map also gets moved.
code is as below :
var isPinDragged = false;
Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
Microsoft.Maps.Events.addHandler(pin, 'drag', dragDetails);
Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);
function startDragDetails(e) {
lastLocation = e.entity.getLocation();
currentLatitude = e.entity._location.latitude;
currentLongitude = e.entity._location.longitude;
isPinDragged = false;
$(e.entity.cm1002_er_etr.dom).find("img").removeClass("droppable");
}
dragDetails = function (e) {
isPinDragged = true;
};
endDragDetails = function (e) {
if (isPinDragged) {
isPinDragged = false;
$(e.entity.cm1002_er_etr.dom).find("img").addClass("droppable");
e.entity.setLocation(new Microsoft.Maps.Location(currentLatitude, currentLongitude)); //update pin: move back to old position
}
};
Update:
I don't know, this info. how much helps to resolve. My pin creation is dynamic, there would be N no. of pins as per user logged in.
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style',
{
callback: function () {
map = new Microsoft.Maps.Map(document.getElementById("divDailyCashMap"), mapOptions);
var center = map.getCenter();
var loc = null;
var pin = null;
var pinLayers = new Microsoft.Maps.EntityCollection();
map.entities.push(pinLayers);
var infoboxLayers = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayers);
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayers.push(pinInfobox);
$.each(codes, function (index, item) {
loc = new Microsoft.Maps.Location(item.Latitude, item.Longitude);
pin = new Microsoft.Maps.Pushpin(loc, { text: '', draggable: true });
pin.Title = item.Title;
pin.Description = item.CodeDescription;
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
Microsoft.Maps.Events.addHandler(pin, 'drag', dragDetails);
Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
Microsoft.Maps.Events.addHandler(map, 'mousemove', mousemoveDetails);
pinLayers.push(pin);
$(pin.cm1002_er_etr.dom).find('img').addClass("droppable").attr({ "data-pinid": item.Code, "data-lat": item.Latitude, "data-long": item.Longitude });
});
}
}
In your dragDetail() function, try:
e.handled = true;
It will tell the event engine that other underlying events should not be fired.
You can also try to add this if it does not work:
return false;
I need the info window to appear on mouseover over the marker.I want to close the info window when the mouse is anywhere except the info window itself. I need this because, i have a hyperlink on the info window and the user should be able to click on the hyperlink. Right now i have the below code:
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
}, false);
marker.addListener('mouseout', function() {
infowindow.close(map, marker);
}, false);
This does not work because the minute i remove the focus from marker the infowindow goes off.
Please let me know.
Thanks
Your problem has three parts:
Setting a timeout for handler of marker's mouseover event so that InfoWindow would not disapear until you move your mouse on it.
Clearing that timeout if mouse comes on the InfoWindow:
var closeInfoWindowWithTimeout;
marker.addListener('mouseout', function() {
closeInfoWindowWithTimeout = setTimeout(() => infowindow.close(map, marker), 1000);
}, false);
infoWindowElement.mouseover(() => clearTimeout(closeMarkerInfoWithTimeout));
Setting mouseleave event on the parent of the parent of the parent of your InfoWindow's content. I Know it's dirty and dependent to how Google Maps implemented InfoWindow, but it's all you can do by now.
Be careful that you should do this after InfoWindow attached to your dom! You can wait for it by listening to domready event of InfoWindow:
infowindow.addListener('domready', () => {
infowindowelement.parent().parent().parent().mouseleave(() => infowindow.close(map, marker));
});
Note that you should use an Element to initialising your InfoWindow's content (Here I used variable infoWindowElement).
It sure isn't perfect, but look at this:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var markers = []; // store the marker objects here
var infoWindow;
var locations = [
[50, 4],
[50.5, 4.5],
[51, 5],
[51.5, 5.5]
]
var contentStrings = [
'Hello',
'World',
'Foo',
'Bar'
];
var mouseIn = false;
function initialize() {
var mapObject = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(locations[1][0], locations[1][1])
};
map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
// make 1 infowindow. We will use it again and again
infoWindow = new google.maps.InfoWindow({
content: ''
});
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
function loadMarkers() {
for (var i=0; i<locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map // replaces marker.setMap(map);
});
markers.push(marker); // store the marker in the array
google.maps.event.addListener(marker, 'mouseover', function () {
// first we want to know which marker the client clicked on.
var i=markers.indexOf(this);
// we set the content of infoWindow, then we open it.
infoWindow.setContent('<div onmouseout="mouseOutsideInfowindow()" onmouseover="mouseinsideInfowindow()">' + contentStrings[i] + '</div>')
infoWindow.open(map, markers[i]);
mouseIn = false;
});
}
}
function mouseinsideInfowindow() {
mouseIn = true;
}
function mouseOutsideInfowindow() {
if(mouseIn) {
infoWindow.close();
mouseIn = false;
}
}
</script>
<style>
#googleMap {
height: 400px;
}
</style>
<div id="googleMap"></div>
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()