I'm trying to have the functionality to where I can mouseover and mouseout on markers and pop the infowindow up and auto close it. Then when a user clicks on a marker I disable the mouseout for that marker to display the infowindow until the user manually closes it. I want to add the mouseout back to the marker when the user clicks the close for the infowindow.
I have this code:
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
//setTimeout(function() { infowindow.close(); }, 3000);
infowindow.close(map, marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
google.maps.event.clearListeners(marker, 'mouseout');
});
I'm trying to use the 'click' event to disable the 'mouseout'. The above works. Now I want to add back the 'mouseout' event after the infowindow is closed using the 'closeclick' below.
google.maps.event.addListener(infowindow, 'closeclick', function() {
//google.maps.event.addListener(marker, 'mouseout', "");
});
I'm not sure how to do it. Can someone point me in the right direction?
I figured this out and thought I'd share:
function attachData(marker, number) {
//snipped code that adds the events that are removed in closeMarker
google.maps.event.addListener(infowindow, 'closeclick', function() {
closeMarker(marker, number);
});
}
The closeMarker function clears all current events and adds them back by calling the attachData function.
function closeMarker(marker, number) {
google.maps.event.clearListeners(marker, 'mouseover');
google.maps.event.clearListeners(marker, 'mouseout');
google.maps.event.clearListeners(marker, 'click');
google.maps.event.clearListeners(marker, 'closeclick');
attachData(marker, number);
}
Related
Employing a variation on function attachSecretMessage and using a mousedown event, I am able to include the marker's title property as a Closure, but on the desktop platform, when a user clicks on the marker and then moves the mouse out of the opened infowindow, the map is dragged until the user clicks somewhere else (I don't know yet what happens on the mobile platform). I have attempted to remove the draggable feature of the map, but unsuccessfully. Can the draggability of the map be defeated?
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
map.draggable = false;
infowindow.open(map,marker);
});
}
Oops. It appears that simply resequencing the javascript instructions defeats the drag. I moved the map.draggable = false; after the info window.open() and no more dragging.
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
infowindow.open(map,marker);
map.draggable = false;
});
}
Guys after a long R&D I was able to draw a circle and put markers which are inside that area of circle based on position and radius.
I'm calling a function which triggers whenever the radius or the position of the circle changes..
It is working fine( function triggers and it fetches the markers from the database.) but the function is called when the circle is being dragged(some 100 times). i want that function to called OnDragComplete.. i didn't find any such events Google API..
below is my code.. Any help would be greatly appreciated.
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
searchLocations();
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
searchLocations();
});
You could add a "dragging" property to the widget on the mouse events and check it in your other functions:
google.maps.event.addListener(distanceWidget, 'mousedown', function() {
distanceWidget.dragging = true;
});
google.maps.event.addListener(distanceWidget, 'mouseup', function() {
distanceWidget.dragging = false;
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
if (distanceWidget.dragging === false) {
displayInfo(distanceWidget);
searchLocations();
}
});
I too faced this issue. we can use drag and dragend event listener inside
DistanceWidget function and use marker instance to listen
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
lat: $('input[name=lat]').val(),
lng: $('input[name=lng]').val(),
draggable: true,
crossOnDrag: false,
cursor: 'crosshair',
title: 'Drag to change circle radius!',
icon: 'assets/front/images/pin.png',
});
google.maps.event.addListener(marker, 'drag', function(e) {
console.log('starting');
});
google.maps.event.addListener(marker, 'dragend', function(e) {
// Trigger once u drop the widget marker
console.log('end');
});
}
I am using the standard infoWindow dialog. However there is a 2px offset where the speech bubble and arrow meet:
Any reason this might be happening?
This is a sample of the code I'm using:
var infoWindow = new google.maps.InfoWindow({});
google.maps.event.addListener(marker, 'click', function() {
var contentString = '<p>Content Here</p>';
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
i have an infowindow that has an "erase entry" button, that when clicked, removes the marker and closes the info window.
when i click the "erase entry" button, it removes the marker and closes the infowindow just fine, but it also registers another click on map, and i have no idea why, and it's driving me nuts.
has anyone bumped into this problem before?
i'm quite a noob at javascript, so any suggestions on implementation would be great too. thank.
below's pseudocode/summary of what i'm doing:
//global variable to keep track of which was the last marker clicked
var lastMarkerJustClicked;
function load(){
//create the map and everything, add the following listener
google.maps.event.addListener(map, 'click', function (event) {
//firebug has been telling me that after i click "erase entry" and my marker is removed and my infowindow closes, i end up here
makeParticularMarker(event.latLng);
});
}
function makeParticularMarker(marker_parameter) {
var markerLocation = //do stuff to get the right marker parameter
var markerWithLocation = new google.maps.Marker({
position: markerLocation,
map: map
});
var html = "<input type='button' value='Erase Entry' onclick=eraseEntry() />"
var markerWithInfo = createMarkerWithHTML(markerWithLocation, html);
}
function createMarkerWithHTML(markerWithLocation, html) {
var markerWithInfo = google.maps.event.addListener(markerWithLocation, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, markerWithLocation)
lastMarkerJustClicked=markerWithLocation;
});
}
function eraseEntry() {
infoWindow.close()
lastMarkerJustClicked.setMap(null);
}
i found the answer here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/221876cc70bea9c6?pli=1
it has to do with propagation. and you stop it by doing something like this
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
this site gives a better explanation about this: http://www.quirksmode.org/js/events_order.html
var image = 'bullets/_st_zzzzzzl SSS.gif';
var bar1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: "bar number 1"
});
google.maps.event.addListener(bar1, 'mouseover', function() {
infowindow.open(map,bar1);
});
google.maps.event.addListener(bar1, 'mouseout', function() {
infowindow.close(map,bar1);
});
Now when im on mouseover i want the icon to change to another image i got.
i tried some tips and some code but nothing works...
Appreciate ur help
Use marker.setIcon() function. The rest is almost the same as opening/closing infowindow in your code:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
Note that besides using image paths in setIcon() function, you can also use google.maps.MarkerImage objects, which are very useful, especially if you want to use image sprites.
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});