I want to be able to keep my map centred and zoomed according to my LatLngBounds when the viewport size changes, but not when a user drags or zooms. I'm using the "bounds_changed" event along with fitBounds() to keep it centred and zoomed properly for viewport changes, but when the map is dragged or zoomed the bounds also change so fitBounds() is essentially preventing these actions too.
function initialize() {
var mapProp = {
center:new google.maps.LatLng(49.8994, -97.1392),
zoom:1,
draggable: true,
zoomControl: true,
scrollwheel: false,
disableDoubleClickZoom: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.803060, -97.229094),
new google.maps.LatLng(49.963223, -97.054686)
);
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'bounds_changed', function() {
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
According to the docs I should be able to access event properties, so I thought I'd check for something that would indicate what specifically triggered the "bounds_changed" event, but the event is showing as undefined in the console.
google.maps.event.addListener(map, 'bounds_changed', function(event) {
console.log(event)
});
I can access properties for simple "click" event but not "bounds_changed", so I'm not sure if there is even supposed to be properties for "bounds_changed", or if there is a completely different approach to accomplishing what I'm trying to do.
var drag = false;
var zoom = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
if (!drag && !zoom) {
map.fitBounds(bounds);
}
zoom = false;
});
google.maps.event.addListener(map, 'dragstart', function() {
drag = true;
});
google.maps.event.addListener(map, 'dragend', function() {
drag = false;
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = true;
});
Related
I have integrate a Google map in my website but map is not load in my website.But when I open inspect element map will work when I close inspect element map will disappear automatically.I don't know why its going like this,Please let me know what the problem. Here is my map code
Thanks in Advance
<div id="mapCanvas" style="width:100%; height:400px"></div>
<input type="text" title="Latitude" id="latt_val">
<input type="text" title="Longitude" id="long_val">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
document.getElementById("latt_val").value = latLng.lat();
document.getElementById("long_val").value = latLng.lng();
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(15.486432009100538, 73.82759375);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
google.maps.event.trigger(window,'resize',{});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
[UPDATE]
Hey, I'm still really curious what's going on here. Do you happen to have an AdBlocker enabled on your browser that might prevent the map from loading? Have you checked if this works in multiple browsers?
I made a codepen of our problem: http://codepen.io/trevorwhealy/pen/obRQdW.
And your map is working perfectly fine. If, on-load of this pen, you still do not see something, then I think we can safely say this is a browser issue.
[OLD POST]
Try putting your code:
google.maps.event.trigger(window,'resize',{}); // or trigger(map
after
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
but still within your initialize function.
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>
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 found that dragend event in Google Map also trigger the click event in IE. It is OK in Firefox and Chrome. Open IE/FF/Chrome console and see the result of this fiddle. Any workaround will be appreciated.
http://jsfiddle.net/ABqMH/8/
Bug Submitted at here.
here is a quick workaround
var map;
var elevator;
var dragged = false;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(46.87916, -3.32910),
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function () {
console.log('dragend');
dragged = true;
setTimeout(function(){ dragged = false; }, 200);
});
google.maps.event.addListener(map, 'click', function (evt) {
if (dragged) return;
console.log('click')
});