Question is simple. On page load I have map without pins. There are control on map that enable to user to place pins on map. Sometimes number of pins that need to be placed are over 2000 and this is process that need time. My question about this is there any google map event similar to jQuery document.ready that could wait until all map pins are placed on map. I need to display loading overlay until all pins are placed on map and after that hide it.
Just like function for map
window.google.maps.event.addListener(map, 'idle', function () {
// do something
});
I try with idle but if map don't change zoom this event is not executed(this situation is possible when you add pins on map).
To answer your question, no there is no google maps event for when all your pins are placed. However you do not need one. Just write your code so that it does these actions in this order when you load your pins:
apply your loading overlay
loop through the creation of all your pins and add them to the map
remove you loading overlay
If code helps you more:
function loadMyPins(pinDataCollection){
addMyOverlay();
for(var i=0; i<pinDataCollection.length; i++){
//create new pin
}
removeMyOverlay();
}
Related
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
I'm creating a map that loads & destroys markers based on both the bounding box and zoom level. I'm having a real problem getting markers to properly be removed, it seems to work sometimes for certain situations.
I have an object that contains the marker info, which also contains the google maps marker object. My code detects if the market should be deleted based on the bounding box or zoom-level. I set the marker object to "setMap(null);" and using firebug I can see that its being set, I then remove the parent object entirely and the objects data length is updated properly.
I output to the firebug console when a marker is supposedly deleted, seems to be working and I can see that the marker isn't being re-crated from the ajax call for markers on the boundingbox change.
Yet if I zoom around the map I can sometimes see that the markers are being removed, if I zoom away then pan back holding the mouse down. Or sometimes the markers will all be removed if I zoomout the first time, but if I zoom in again then back out they are not removed.
I must be doing something wrong with the logic of my code, I'm stumped.
You can view the source of
http://www.trailforks.com/map/test.php?lat=49.352247&lon=-123.202413
the JS is
http://www.trailforks.com/map/includes/map.js
the code for deleting a marker is at the bottom
function clearMarkerMemory(mapItem, i) {
google.maps.event.removeListener(mapItem.lis); // remove stored listener
mapper.data[i].obj.setMap(null); // remove marker
mapper.data.splice(i, 1);
console.log("removed marker "+mapItem.icon+":"+mapItem.nid+' '+mapItem.name);
};
I added some more debug into to the console, going to a simple area of the map with only 2 markers http://www.trailforks.com/map/test.php?lat=49.43210641783767&lon=-123.49878636730955&z=14
I can see the markers created, then move the map a bit and see that the markers weren't re-created because they were detected in the marker object. I then move the viewport so one of the markers is off the screen and I can see that the marker is removed and the marker object length updates. But if I pan the map back over the marker is still on the map.
I was struggling with similar problem for a long while until I realized that the map marker's setMap-method is asynchronous. When you call that and immediately remove any references to that marker object, the browser's garbage collector steps in and cleans it up from the memory and thus prevents the actual remove operation from happening.
Try it out by just commenting out the line with the splice call and see if that helps. If it does help, you should consider delaying the removal of the object, or alternatively storing the reference to the marker object until it's really removed. How to detect if it's really removed? I have no idea.
I hope this helps!
Instead of doing:
google.maps.event.addListener(map, 'dragend', function() { refreshMarkers(); }); //refresh markers when user moves map
google.maps.event.addListener(map, 'zoom_changed', function() { refreshMarkers(); }); //refresh markers when user moves map
change it to:
EDIT, (after comments):
To prevent multiple instances of the event handler occurring simultaneously, a global variable could be used, as follows:
google.maps.event.addListener(map, 'bounds_changed', function() {
if (processing) { // var processing is global
return;
}
processing = true;
refreshMarkers();
processing = false;
}); //refresh markers when user moves map
That should cover both situations. As it is now, with two different event listeners, the AJAX calls could be conflicting, and you maybe firing a second call before the first one has completed.
I want to put a map in a web page where users will be able to put interactive marker (location pins) as many as they want. Now, whenever a marker is placed, I want to store that specified marker's lat, long value to be saved in a database that I have in my server (phpmyadmin).
Trying to get started with Google Map Data API. Have seen lots of examples but could not find any where interactive markers can be placed.
I'm going to show you how to do it with v3 of the APi
Create your map... I'll assume you've got this part down.
Add an event listener to the map. This event listener will call a function that will create the marker (in this case add_marker). You can use any event you want, this uses the click event.
google.maps.event.addListener(this.map, 'click', add_marker);
Create the function that adds the marker to the db then the map. This will require some AJAX. You use the event.latLng to get the lat/lng
function add_marker( event ) {
lat = event.latLng.lat;
lng = event.latLng.lng;
// ajax code here that posts the lat/lng to the server
// only call the remaining code to add the marker if it was successful
var marker = new google.maps.Marker({
position: event.latLng,
map: map // put the handle of your map here
});
}
In version 2 of the API the map click event returned an Overlay, LatLng, Overlaylatlng.
I used this to create a generic map event that would either retrieve the coordinates of the Map click event, or return the coordinates of a Marker or other type of Overlay.
Now that API v3 doesn't return the Overlay or Overlaylatlng during the map click event, how can I go about creating a generic "click" event for the map that works if the user clicks on a marker or overlay? I really don't want to create a click event for each marker I have on my page as I am creating anywhere from a handful to a couple thousand markers.
Also, I had to create a custom ImageMapType in order to display the StreetViewOverlay like we could do in v2 of the API because I couldn't find anywhere that told me how to add the StreetViewOverlay without the pegman icon. How can I go about retrieving the LatLng coordinates of a click on this overlay type as well?
You will need to add a click listener to each overlay you add. You can do this in a createMarker function to reduce your code overhead.
Clicks on markers do not trigger a click event on the map at all.
I need to display a set of markers on a google map. In addition, I need to show additional markers, loaded dynamically, when the user pans the maps.
The number of markers could be in thousands, out of which 30-50 need to be displayed initially. Other markers need to be loaded and displayed only when user pans over an area that contains markers. I thought about using marker managers but i am not sure if markers can be fed to the marker manager dynamically. I want something more like this map. Notice how images load when you pan the map and garbage-collected when you pan away.
Marker clustering is not important but might be nice.
I am doing this with clustering on a dataset of several thousand markers. This is how I'm doing it: When the 'moveend' event is fired, I get the bounds of the map and send an ajax request to the server. I get the markers from your DB which are in the bounds and send them back to the client. If you have questions about a specific part of the process, just let me know.
Also, with the Marker Manager, I believe that you can add markers dynamically.