Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.
This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer
It can be used like this:
google.maps.event.addListener(kmlLayer, 'status_changed', function () {
if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
// Success
}
else {
// Failure
}
});
If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.
So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...). In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.
You can attach listeners by going:
google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
...
}
You could also "hide" the map canvas with a loading div and show it after initialization.
Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2
Related
I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:
$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});
Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.
Here's the full js code.
EDIT
This is what I updated the code to:
$(document).ready(function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});
After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.
I have a map with several moving markers on it and have been trying to remove each individual one when their respective animation ends. I am using Leaflet and Leaflet's plugin Leaflet.MovingMarker. I tried using methods isEnded() and end without much success.
With the latter method (end), the following code removes only but one marker (full code here):
marker.on('end', function() {
map.removeLayer(this);
});
With a click event instead of an end event, each marker is made easily removable, but then this is not what I am looking for:
marker.on('click', function() {
map.removeLayer(this);
});
With the method isEnded(), have not had any luck at all either (full code here):
var ended = marker.isEnded();
if (ended = true) {
console.log("this marker ended!");
map.removeLayer(this);
}
I wonder what I am missing here? Any hint appreciated!
I am working on an app that will dynamically load in markers based on a users location. The map should add events to the map if a user zooms out. For the map we are using Polymer's Google Map. I am having a hard time finding out how to react to the zoom event. We added a map to the page with:
<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>
I have tried several different js eventhandlers such as:
<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>
I can't even get events such as "google-map-click" to fire. The only one that seems to work is "google-map-ready".
Please help.
Try adding event listener to map property instead of google-map element.
Something like this gives you all zoom changes
<script type="text/javascript">
var mapElement = document.querySelector("google-map");
mapElement.addEventListener('api-load', function(e) {
google.maps.event.addListener(this.map, 'zoom_changed', function() {
// handle zoom event...
});
});
</script>
I have a leaflet application at http://atlantaartmap.com. The javascript it uses is http://atlantaartmap.com/lazy_art.js.
At line 16, I grab a url parameter that can be used to open the map on a specific piece. While creating the markers, there is a piece of code at line 71 that checks to see if the most recently created marker has the ID referred to in the URL.
This code used to work, but I recently added marker clusters to the website and it no longer does. It still pans and zooms to the marker, but the popup does not open. Here is an example.
http://atlantaartmap.com/index.html?piece=40
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom());
marker.openPopup();
}
I'm not sure why, but map.setView() works and marker.openPopup() doesn't.
Any ideas? Thanks in advance.
My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method has completed by listening to the zoomend event and then open the popup:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
marker.openPopup();
});
}
If that won't work you can try to use a little delay with setTimeout:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
setTimeout(function () {
marker.openPopup();
}, 500); // Uses millisecs, you might need to fiddle around with it
});
}
Another option could be to wait for the marker's add event:
if (marker.feature.properties.pieceID == pieceID) {
marker.once('add', function () {
marker.openPopup();
});
map.setView(marker.getLatLng(), newZoom());
}
Hope that helps, as said am unable to test this due to the complexity of your case so i'm not sure. Good luck!
The ui-map example works perfectly when using on a simple angular.js page.
Now I'm using the ui-router and trying to display the map inside a view.
What happens is that the map tiles are only displayed on half of the map.
If I resize the window, the map is displayed correctly.
I think I have to trigger the Google Maps resize event once the view is rendered, but how?
google.maps.event.trigger(<myMapObject>, 'resize');
Wait for a while before calling trigger, I had this same issue and found resolved here:
AngularJS: map via Google Maps API v3 in a tab
window.setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},100);
that work with angular 1.3.15
$timeout(function(){
angular.forEach($scope.maps, function(index) {
google.maps.event.trigger(index, 'resize');
});
}, 100);
}
$scope.maps = [];
$scope.$on('mapInitialized', function(evt, evtMap) {
$scope.maps.push(evtMap);
});
http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview
other solutions
without adding $timeout you could also use $scope.$applyAsync() that runs code within the same digest cycle