I have the following code to try to get the MarkerClusterer library to work for my Google Map, it's work. But when i try to close all info window by click on map, my info window on clusterer don't work.
See my work here : http://www.concepteur-internet.fr/test_carto1.php
Can you help me ? Thanks
Change:
google.maps.event.addListener(map, 'click', function(){
//infowindow.close();
});
To:
google.maps.event.addListener(map, 'click', function(){
infowindow.close();
});
Related
My goal is to have the following behavior:
mousein on marker - open infowindow;
mouseout of marker - close infowindow;
But, when I mousein from top of the marker, still not reaching the marker, but very close to the marker from top, the infowindow is opened; then, the mouse is on the tip of the infowindow, which now triggers the mouseout event from the marker - probably since the mouse is now considered on the tip of the infowindow. Then, the infowindow closes, and the mousein is triggered, and this happens infinitely.
Is there a way to "tell" the API to only trigger marker mousein event when the mouse is actually on the marker? Or, is there another way to avoid this loop?
EDIT: here is how fast the loop goes:
web.js:1447 mouseover: 10:53:56.209
web.js:1452 mouseout: 10:53:56.233
web.js:1447 mouseover: 10:53:56.258
web.js:1452 mouseout: 10:53:56.291
web.js:1447 mouseover: 10:53:56.297
web.js:1452 mouseout: 10:53:56.315
web.js:1447 mouseover: 10:53:56.339
web.js:1452 mouseout: 10:53:56.376
web.js:1447 mouseover: 10:53:56.401
web.js:1452 mouseout: 10:53:56.435
There is no event such as mousein in the JavaScript UI Events in Google Maps JS v3. You have to use mouseover instead of mousein. Please check the Events documentation to learn more about events and also the Marker class reference. You may see this in the doc:
Events: animation_changed, click, clickable_changed, cursor_changed, dblclick, drag, dragend, draggable_changed, dragstart, flat_changed, icon_changed, mousedown, mouseout, mouseover, mouseup, position_changed, rightclick, shape_changed, title_changed, visible_changed, zindex_changed
It should be used like this:
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
Click on this link to see it in action.
I've done well by my standards! I have pretty much zero knowledge of JS other than the basics of Functions etc. Ive used these pages to pull together a working script that loads Google Maps into a Modal using the SimpleModal framework. To my relief I got it working but it has one final bug that I cannot shift. The Modal loads on the first click of the HREF but if I close the modal and then try to reopen it it loads the modal with parts of the map missing. The missing map issue was a problem i thought I had already solved. My JS is
var map;
var src = 'https://sites.google.com/site/bristol2monaco/kml/route2.kml';
function initialize() {
var myLatlng = new google.maps.LatLng(51.337890,-0.813049);
map = new google.maps.Map(document.getElementById("basic-modal-content"), {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
clickable: false,
preserveViewport: true,
map: map
});
}
initialize();
and the js file that registers the 'click' contains:
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#table .newbasic').click(function (e) {
$('#basic-modal-content').modal();
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
return false;
});
});
As i thought i had already solved the missing map bug (using solutions posted here) with the (map, resize) line above none of the solutions on here help. Do i have to reinitialise the map or something. Grateful for advice.
When you call the modal to open use the onOpen Function described by Eric Martin. With using his onOpen function you will be able to use the callback feature and thusly use the google map event-listener to listen for the resize event. Once the resize event has been heard, you can reinitialize your google map thusly removing the gray areas
$("#table .newbasic").modal({
onOpen: function (dialog) {
google.maps.event.addListenerOnce(map, 'resize', function() {
//Alert TESTING IF RESIZE is heard(remove after test)
alert("heard resize onOpen");
initialize();
map.setCenter(center);
});
google.maps.event.trigger(map, "resize");
}
});
Let say i wanna make a new place in my app (based-on google map API v3). Whenever click on "add new place" button, a marker appears in my current location on the map. And when I click on the marker or drag it to somewhere that I wanna put my place, an infowindow bound with this marker appears so that i can input data.
But each time I click or drag my marker, all my text I've input into my infowindow before was lost. Someone can tell me the way to prevent data loss when drag or click on marker many times?
Here is my code to listen for clicking or dragend
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function() {
infowindow.open(map, marker);
});
Thanks
p/s: my English isnt very good
In your maker click function you should check if the infowindow is already open and if it is then don't open it again.
I have a map with a bunch of markers, and a table of data that corresponds to each marker. When the user clicks on an item in the table, the InfoWindow for the corresponding marker is opened. Everything works fine when the map is zoomed out and the markers are all visible, but if the map is zoomed in, and an InfoWindow for an off-screen marker is opened by clicking the item in the table, here is what happens:
The map scrolls to the correct location, where the InfoWindow already appears open
The map stops panning, and the InfoWindow disappears.
Any suggestions as to what might be going on and how to solve this?
Alright, the issue related to the fact that I was using the Marker Clusterer on the map... essentially, the following was happening:
Click item in table, InfoWindow opens
Map gets panned to the location to display the InfoWindow
When panning is complete, the Marker Clusterer was then re-drawing (if needed), and forcing the InfoWindow closed.
My solution was that when an item in the table is clicked, I get the corresponding Marker's latlng, manually pan to this location, wait for the panning to complete via the 'idle' listener, and when complete (and the Clusterer has done it's re-draw), THEN I open the InfoWindow.
// get map, marker positions
var mapLatLng = GLOBAL_map.getCenter();
var markerLatLng = GLOBAL_markers[index].getPosition();
// pan the map
if(!markerLatLng.equals(mapLatLng)) {
// map will need to pan
GLOBAL_map.panTo(markerLatLng);
google.maps.event.addListenerOnce(GLOBAL_map, 'idle', function() {
// open InfoWindow
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
});
} else {
// map won't be panning, which wouldn't trigger 'idle' listener
GLOBAL_infowindow.setContent(GLOBAL_markers_content[index]);
GLOBAL_infowindow.open(GLOBAL_map, GLOBAL_markers[index]);
}
This drove me crazy. My solution is simpler, though. I just set a timer so I don't refresh the map within one second after a pin is clicked.
start with the global:
// global timer variable
var clickTime = Date.now() - 1001;
then define you marker click like:
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
clickTime = Date.now();
});
then set up your idle like:
google.maps.event.addListener(map, 'idle', function () {
if (Date.now() > (clickTime + 1000))
updateMap();
});
Don't use idle event. Use dragend and zoom_changed events from the API spec instead which will allow you to open your infoBoxes without refreshing the map.
google.maps.event.addListener(map, 'dragend', function() {
getMarkers();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
getMarkers();
});
Does any one have a clue how to add an info windows to the cluster markers, containing the merged markers info window content?
This is an of the default marker clusterer behaviour:
http://www.psop.fr/MAP_Population_Google.php
thanks
You should listen to the clusterclick event on the markercluster. The object that is passed into the event contains an array of markers that are in the cluster and the position of the cluster.
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
markers = cluster.getMarkers();
info = "";
$.each(markers, function(x, marker) {
if(me.infowindows[marker.__gm_id]){
info = info + "<br/>" + me.infowindows[marker.__gm_id].content;
}
});
.....
something like that works, you get the markers associated with the clusterclick. and then loop through the infowindows, i'm not sure how yours is set up. but the above code should make sense.
you also need to disable the zoom on click as the clusters get re-drawn for each zoom.
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});