May I know how can I disable double click on google map so that the info window will not close when I double click on google map? Can it be done through google map api?
You can disable double-click zoom on Google Maps by setting the following google.maps.MapOptions object property:
disableDoubleClickZoom: true
Sample code:
var mapOptions = {
scrollwheel: false,
disableDoubleClickZoom: true, // <---
panControl: false,
streetViewControl: false,
center: defaultMapCenter
};
You can take advantage of, dblclick fires if it is a double click, and single click fires in such occations only once.
runIfNotDblClick = function(fun){
if(singleClick){
whateverurfunctionis();
}
};
clearSingleClick = function(fun){
singleClick = false;
};
singleClick = false;
google.maps.event.addListener(map, 'click', function(event) {// duh! :-( google map zoom on double click!
singleClick = true;
setTimeout("runIfNotDblClick()", 500);
});
google.maps.event.addListener(map, 'dblclick', function(event) {// duh! :-( google map zoom on double click!
clearSingleClick();
});
See http://www.ilikeplaces.com
You need an external var to do that :
var isDblClick;
google.maps.event.addListener(map, 'dblclick', function (event) {
isDblClick = true;
myDlbClickBelovedFunction();
});
google.maps.event.addListener(map, 'click', function (event) {
setTimeout("mySingleClickBelovedFunction();;", 200);
});
function mySingleClickBelovedFunction() {
if (!isDblClick) {
// DO MY SINGLE CLICK BUSINESS :)
}
// DO NOTHING
}
(Please consider that this is not answer, it is only same solution like Ravindranath Akila has been answering already, for using in wider ranges of solutions [eg. Mobile platforms] concentrated on one reusable method without global variables)
We have similar trouble by Win 8.1 Mobile app. Thanks to Ravindranath Akila we finalized solution which is defined in one method and checking also zooming and moving with center of map. Anyway sometimes happened that the address we get from map-click is wrong - improvements are welcomed.
// code
{
// adding event method
addGoogleClickEnventHandler(map, function(e) {
// example code inside click event
var clickLocation = e.latLng;
getAddress(clickLocation);
});
}
// function
function addGoogleClickEnventHandler(googleEventableObject, handlingFunction) {
var boundsChanged = false;
var centerChanged = false;
var singleClick = false;
function runIfNotDblClick(obj) {
if(singleClick && !boundsChanged && !centerChanged){
handlingFunction(obj);
}
};
googleEventableObject.addListener('bounds_changed', function () { boundsChanged = true; });
googleEventableObject.addListener('center_changed', function () { centerChanged = true; });
googleEventableObject.addListener('dblclick', function () { singleClick = false; });
googleEventableObject.addListener('click', function(obj) {
singleClick = true;
setTimeout(function() {
runIfNotDblClick(obj);
}, 200);
boundsChanged = false;
centerChanged = false;
});
}
Here's an example that gives a live preview of the coordinates.
When you click once, it saves the cordinates and when you double click it puts a marker.
Remember to sign up and create a key and paste it in where it says
YOUR-API-KEY in the src script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 300px;
width: 600px;
}
</style>
</head>
<body>
<div id="latclicked"></div>
<div id="longclicked"></div>
<div id="latmoved"></div>
<div id="longmoved"></div>
<div style="padding:10px">
<div id="map"></div>
</div>
<script type="text/javascript">
let map;
function initMap() {
let latitude = 27.7172453; // YOUR LATITUDE VALUE
let longitude = 85.3239605; // YOUR LONGITUDE VALUE
let myLatLng = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14,
disableDoubleClickZoom: true, // disable the default map zoom on double click
});
// Update lat/long value of div when anywhere in the map is clicked
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Update lat/long value of div when you move the mouse over the map
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latmoved').innerHTML = event.latLng.lat();
document.getElementById('longmoved').innerHTML = event.latLng.lng();
});
let marker = new google.maps.Marker({
position: myLatLng,
map: map,
//title: 'Hello World'
// setting latitude & longitude as title of the marker
// title is shown when you hover over the marker
title: latitude + ', ' + longitude
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Create new marker on double click event on the map
google.maps.event.addListener(map,'dblclick',function(event) {
let marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function() {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
});
// Create new marker on single click event on the map
/*google.maps.event.addListener(map,'click',function(event) {
let marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
});*/
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
</body>
You can disable the marker's 'dblClick' event.
event.stopPropagation();
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
It cannot be done, you would essentially have to block or prevent the event from happening.
You could try something like createInterceptor() like in EXT JS. This would fire before the event is fired, and you can return false to prevent the actual event to fire, but I am not sure it will prevent the code from executing before the event is fired within that code.
Related
google.maps.event.addListener(newMarker, 'rightclick', ( function(newMarker){
return function() {
var icon;
icon = newMarker.getIcon();
newMarker.setIcon('delPin.png');
if (confirm('Sure to delete selected marker?')) {
newMarker.setMap(null);
}else newMarker.setIcon(icon);
};
})(newMarker));
I need to be able to show a different icon, to highlight it, while the marker is right clicked and the confirm message is awaiting user action.
Then if the answer is positive the code has to delete definitely the marker, while in case of negative answer it has to reset the icon of the marker to the previously value.
In page execution it seems to ignore the command newMarker.setIcon('delPin.png'); and execute first the confirm command, so there are no icons change.
If I remove the if statement the listener changes the icon positively, so it means that there are not problem on the image source or command syntax.
Any suggestions on what is the problem and how can I fix it? Thanks in advance for your support.
Looks like you need to give the browser time to load and render the new icon before you execute the confirm.
google.maps.event.addListener(newMarker, 'rightclick', (function(newMarker) {
return function() {
var icon;
icon = newMarker.getIcon();
newMarker.setIcon('http://maps.google.com/mapfiles/ms/micons/blue.png');
// delay to allow new icon to load and render.
setTimeout(function() {
if (confirm('Sure to delete selected marker?')) {
newMarker.setMap(null);
} else newMarker.setIcon(icon);
}, 1000);
};
})(newMarker));
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var newMarker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
})
google.maps.event.addListener(newMarker, 'rightclick', (function(newMarker) {
return function() {
var icon;
icon = newMarker.getIcon();
newMarker.setIcon('http://maps.google.com/mapfiles/ms/micons/blue.png');
setTimeout(function() {
if (confirm('Sure to delete selected marker?')) {
newMarker.setMap(null);
} else newMarker.setIcon(icon);
}, 1000);
};
})(newMarker));
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I want to show pushpin when double click in map but pushpin not show. Thanks a lot.
Source code :
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: "Key", center: new Microsoft.Maps.Location(-00,00)zoom: 10 });
//add pushpin
var map = new Microsoft.Maps.Map($map.get(0), mapSettings);
Microsoft.Maps.Events.addHandler(map, 'doubleclick', function (e) {
var latitude = "";
var longitude = "";
var location = new Microsoft.Maps.Location(latitude, longitude);
var pushpin = new Microsoft.Maps.Pushpin(location, {'draggable': false });
map.entities.push(pushpin);
// Update destination count
$('#destinations-count').html(nodes.length);
});
To bind the double click on the Map Control of Bing Maps AJAX v7, you need to use the appropriate event which is dblclick.
Microsoft.Maps.Events.addHandler(map, 'dblclick', yourMethod);
Or inline:
Microsoft.Maps.Events.addHandler(map, 'click', function(e) { ... });
See the documentation on the MSDN here:
https://msdn.microsoft.com/en-us/library/gg427609.aspx
In Google Maps, I would like to be able to keep the center of the map on a marker on my location when I'm zooming in or out. It's something that Ingress does, it doesn't matter where you double tap (or double click) or where you pinch, the map remains centered on your marker. So it's possible...
The best I came up with for now is :
google.maps.event.addListener(mymap, 'zoom_changed', function() {
mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon});
})
But it's far from perfect, it just re-center the map after the user already zoomed...
Thanks a lot !
[EDIT] absolutely nothing helps in the API ref... Or elsewhere I'm blind and missed it !
Purely using Javascript
First you disable scroll zoom function by default of google map by scrollwheel=false,
Next create custom scroll zoom function by capture mouse event and set zoom level for google map
Check my sample code: Fiddle URL: https://jsfiddle.net/vh3gqop0/17/
var map, i = 12;
function initialize() {
var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
var mapOptions = {
center: myLatlng,
zoom: i,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Any Title'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$( document ).ready(function() {
$('#map_canvas').on("wheel", function(evt){
// console.log(evt.originalEvent.deltaY);
if(evt.originalEvent.deltaY > 0){
map.setZoom(++i);
}else {
map.setZoom(--i);
}
});
});
#map_canvas{
height:400px;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
I have no idea why you tagged this question as both Javascript and Android. On Android you need to wrap your MapView inside another view and detect Double Tap motion inside onInterceptTouchEvent which you can override if your class can override FrameLayout for example. Then return true to prevent the map from handling this event and you handle it instead.
For full code please see my answer here: https://stackoverflow.com/a/30118649/764897
Unfortunately Google Maps Api does not provide this behaviour.
The following example doesn't require jQuery and supports double-click and mouse scrolling, but you can add more events if you want.
View in Codepen
Disable:
Double-clickin
Scrolling
Panning
Add dblclick and zoom_changed events on the map and a mousewheel event on the canvas.
I have commented the code, hopefully this works for your case. Keep in mind that you need to normalize mousewheel speed for all browsers and devices. Hammer.js is a good library for that.
var map, zoom;
function initialize() {
// The white house!
var myLatLng = new google.maps.LatLng(38.8977, -77.0365);
// Default zoom level
zoom = 17;
// Keep a reference for evens
var $map = document.getElementById("map");
// Disable scrolling + double-click + dragging
map = new google.maps.Map($map, {
zoom: zoom,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDoubleClickZoom: true,
//draggable: false
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
// EVENTS
// Double Click: event zoom by 1
map.addListener('dblclick', function(e) {
zoomHandler(e.latLng, 1);
});
// Zoom changed: update current zoom level
map.addListener('zoom_changed', function(e) {
// Using a timeout because `getZoom()` does not return a promise.
setTimeout(function() {
zoom = map.getZoom();
}, 50);
});
// Dom event: On mousewheel
$map.addEventListener('mousewheel', wheelEvent, true);
}
// Mouse Scrolling event
function wheelEvent(event) {
if (event.deltaY > 1)
zoomHandler(event, -1);
else
zoomHandler(event, 1);
}
// Zoom in/out
function zoomHandler(event, zoomin) {
zoom += zoomin;
map.setZoom(zoom);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 100%;
height: 240px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>
You should try the center_changed event with panTo function.
google.maps.event.addListener(mymap, 'center_changed', function() {
mymap.panTo({lat: myLoc.lat, lng: myLoc.lon});
})
You can see an example about it here and documentation about panTo function here.
Becareful, it should mess up all the draggable thing.
Im working on a google maps plugin (there's always room for another right?) and I'm drawing a preview of the map my users will be inserting into their content. Im able to draw everything I set out to, custom content in the info window, setting the location (through places.Autocomplete) etc. The one thing that is escaping me is custom map icon isn't being drawn.
My goal is to have the default icon drawn on first load, and then update it when it changes
Im not getting any 404 or errors in the console, and I've checked my event handlers and they are all working. Can anyone tell me where I've going astray?
Here is what I have so far:
//Initilize the map
google.maps.event.addDomListener(window, 'load', initialize);
function initialize(infowindow) {
var init_center = new google.maps.LatLng(43.703793, -72.326187);
mapOptions = {
center: init_center,
zoom: parseFloat(mapZoomReturn),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel : false,
};
var input = document.getElementById('mapAddress');
var autocomplete = new google.maps.places.Autocomplete(input);
var infowindow = new google.maps.InfoWindow();
//var marker = new google.maps.Marker({
// position: init_center,
// map: map,
// icon: mapMarkerImageReturn
//});
// Draw the map
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// marker needs to be set after the map
var marker = new google.maps.Marker({
position: init_center,
map: map,
icon: mapMarkerImageReturn
});
// Set up event listeners
// Info window DOM->MAP
google.maps.event.addDomListener(document.getElementById('mapInfoWindow'),
'change', function() {
mapInfoWindowReturn = escape(jQuery('#mapInfoWindow').val());
// get the extra content from feild, by this time the place_changed even will have fired at least once, so we have these values
infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn); // returns formatted markup for info bubble
infowindow.setContent(infowindowPlace);
});
// Marker dropdown selection DOM->MAP
google.maps.event.addDomListener(document.getElementById('mapMarker'), 'change', update_maker);
// Custom marker text field DOM->MAP
google.maps.event.addDomListener(document.getElementById('mapMarkerImage'), 'change', update_maker );
function update_maker(){
//update the marker imge - (not working)
markerImage = get_marker_image(); // returns URL as string
marker.setIcon(markerImage);
marker.setPosition(locPlace.geometry.location);
marker.setMap(map);
}
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn);
infowindow.close();
if (mapMarkerImageReturn !=='' || mapMarkerImageReturn !== false) marker.setVisible(false);
input.className = '';
locPlace = autocomplete.getPlace();
if (!locPlace.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (locPlace.geometry.viewport) {
map.fitBounds(locPlace.geometry.viewport);
mapCurrCenter = map.getCenter();
} else {
map.setCenter(locPlace.geometry.location);
map.setZoom(parseFloat(mapZoomReturn));
mapCurrCenter = map.getCenter();
}
// Set the marker image (not working)
markerImage = get_marker_image(); // returns URL as string
marker.setIcon(markerImage);
marker.setPosition(locPlace.geometry.location);
marker.setMap(map);
// get the location values for the info bubble
if (locPlace.address_components) {
//console.log(locPlace.address_components);
// Populate values for info bubble
locName = locPlace.name;
locIcon = locPlace.icon;
locAddress = locPlace.formatted_address;
locPhone = locPlace.formatted_phone_number;
locWeb = locPlace.website;
}
infowindowPlace = get_info_bubble(locIcon, locName, locAddress, locPhone, locWeb, mapInfoWindowReturn);
infowindow.setContent(infowindowPlace);
infowindow.open(map, marker);
});
}
I have a map with streetview panorama, an infowindow and a draggable marker. After the marker is dragged, a function requests the getPanoramaByLocation to see whether the view service is available. If it's not, it closes the infowindow. That is great but when I click again on the marker the infowindow does not open anymore. Do you know what is wrong please?
tx
var sv = new google.maps.StreetViewService();
function initialize() {
var optionMap = {
zoom: 13,
center: new google.maps.LatLng(47.390251,0.68882),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("mapDiv"), optionMap);
var optionsMarker = {
position: new google.maps.LatLng(47.390251,0.68882),
map: myMap,
draggable: true,
title: "my marker"
}
var marker = new google.maps.Marker(optionsMarker);
var infowindowDiv = '<div id="streetview" style="width:300px;height:200px;"' +'</div>';
var infoWindow = new google.maps.InfoWindow({
content: infowindowDiv,
position: myMap.getCenter() });
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(myMap, marker);
});
google.maps.event.addListener(infoWindow, 'domready', function() {
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("streetview"));
panorama.setPosition(infoWindow.getPosition());
google.maps.event.addListener(marker, 'dragend', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);});
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
}
else {
infoWindow.close();
infoWindow = null;
};
}
});
}
From the GMaps API docs:
close() None Closes this InfoWindow by removing it from the DOM structure.
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
So... If you close the infowindow, it's gone. For ever. All the more so if you REALLY make sure it's gone by saying "infoWindow = null;" You have to make a new one. My advice would be to refactor your code to have a separate function that creates the infowindow on demand and returns it. In your click event definition, check whether infowindow is null, and if so, grab a new one.
HTH
As the other answer explain, the infobox html is removed from DOM when the user clicks the close button, but the JS object still there.
When you create an infowindow you must call the open method to see it on the map
myInfoWindow.open(mymap);
So, if you listen to the 'closeclick' event and keep the infowindow state
var infoWindowClosed = false;
google.maps.event.addListener(myInfoBox, "closeclick", function () {
infoWindowClosed = true;
});
you can reopen myInfoWindow on demand
if(infoWindowClosed){
myInfoWindow.open(mymap);
}