The Google Maps idle event is supposed to fire "when the map becomes idle after panning or zooming." (Google Maps JavaScript API V3 Reference, Events example page)
Yet, whenever the cursor passes over an element of a data layer, the idle event fires constantly, making it useless. (See https://jsfiddle.net/162tdb53/6/)
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
map.addListener('idle', function(event) {
console.log('IDLE');
});
}
Any insight appreciated
UPDATE
This bug was handled in issue tracker https://issuetracker.google.com/issues/74214837.
It was marked as Fixed in version 3.32 on March 7, 2018.
Try using the release version of the API instead of the experimental version. You can do that by just adding v=3 to the js call.
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=###&callback=initMap"></script>
versus
<script async defer src="https://maps.googleapis.com/maps/api/js?key=###&callback=initMap"></script>
Yep, you're not the only one. Looks like a Google Maps Api update in the last 24-hours has the map moving in the background.
Found this patch on a Drupal forum. Testing some things on my end and will let you know if we come up with anything. https://www.drupal.org/project/geolocation/issues/2950361
Related
Trying to use the Google Map Javascript API.
I have the 3 things on the page which I believe are required to display a map.
The script tag in the header:
<script src="https://maps.googleapis.com/maps/api/jskey=APIKEY&map_ids=MAPID&callback=initMap"
async>
</script>
The div tag with an id of map:
<div id="map"></div>
Create a new map in js:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAPID' });
But when the page loads a request URL that is getting blocked. Blocked URL is:
https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1shttp://127.0.0.1...APIKEY...
Been googling 'QuotaService.RecordEvent google maps blocked' but I haven't been able to find a solution.
The API is attached to a project that has billing enabled.
Any idea why it is getting blocked? I'm sure I did something wrong, but can't figure out what.
Found what was causing the URL to be blocked.
uBlock Origin
I turned it off and the URL is no longer blocked. Which is weird since a lot of people use uBlock. I'm a Google Maps API rookie so I will figure it out but the URL is no longer blocked. :)
Anybody understand how to use the "Cloud Based Map Styling" for the Google Maps Javascript API?
I've been following the documentation but it doesn't actually explain how to to use the Map ID once it's been associated with the styling.
The only advice I could find was this this answer, but I'm trying the script below and although a map appears, there is no style applied to it.
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
mapId: "t43vt7y4ct837ytv", //not my real Map ID
disableDefaultUI: true,
center: { lat: 51.4765924, lng: -0.003 },
zoom: 15.5
});
}
As pointed out by #ecg8 (and from a more careful read of the question How do I change the mapId of a Google vector map?) I also needed to supply the Map ID as with the map_ids query parameter in url of the script loading.
As an example see url in the script tag below.
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>
I'm assuming this will be added back into the official documentation for the API, but at the moment I can't seem to find it, so answering my own question here.
I want to reuse a google map that I created with gmap3 after I initialized it once with a set of markers. This currently works, however I explain later
Currently I run something similar to:
$('#mapWrapper').gmap3({
clear: {
name:['marker', 'infoWindow']
},
map:{
options: mapOptions
},
marker:{
values: markers
}
});
When I want to update the map with new markers I run the same piece of code.
I am having issues running in a hybrid app on ios7 with cordova, due to memory limits with the new ios7. So I am looking on ways to remove memory leaks.
gmap3 v5 does reuse itself if it is allready initialized. You can see that in the code by yourself, $.fn.gmap3 :
gmap3 = $this.data("gmap3");
..
if (!gmap3){
gmap3 = new Gmap3($this);
..
You dont have to reinitialize your map over and over - just to reset / add new markers. Lets say you have initialized your gmap3 as in your code above, and have two buttons - #addMarker and #clearMarkers :
<button id="clearMarkers">clear</button>
<button id="addMarker">add</button>
Then you can add / remove markers on the fly like this :
//add a marker, this could be an array of markers / latlngs
$("#addMarker").click(function() {
$('#mapWrapper').gmap3({
marker:{
latLng : new google.maps.LatLng(46.578498, 2.457275)
}
});
});
//clear all markers on the map
$("#clearMarkers").click(function() {
$('#mapWrapper').gmap3({
clear: {
name:["marker"],
}
});
});
So you see, gmap3 already reuse itself.
However, if you have memory issues - why use an "expensive" library as gmap3 anyway? Would it not be better with a native google map, and using a map-instance to update the map with? That would certainly reduce the memory usage a lot.
But I am not totally convinced that it actually is memory you have a problem with. When people are facing problems with google maps on smartphones, it is most likely due to google maps caching of map-tiles, that quickly kan fill up the internal cache.
You can avoid googles map-tile caching completely - see this link -> How to prevent Google Maps API v3 from caching tiles - It works great even though the question / answer has got little attention.
I'm trying to display a map by creating a view and inserting it into DOM, and it works fine the first time, but fails on subsequent invocations of the view, displaying a gray empty area.
Here is the JSFiddle of the problem: http://jsfiddle.net/dyuvH/14/
Everything works fine when you click on the 'Click to load map' link, but will fail if you do it again.
I'm loading a map into a view using the following:
onRender: function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapView = new App.MapView();
var map = new google.maps.Map(mapView.el, mapOptions);
mapView.render();
this.ui.mapContainer.html(mapView.el);
}
Again, everything works perfectly the first time and fails the second. I'm thinking the view is holding on to some aspect of the map or vice-versa. I do create new instances of the map and the view using the "new" keyboard in both cases, so I'm not sure what's messed up.
Any help is appreciated.
The call to mapView.render() is not necessary, and can be removed or commented out. That will at least get the map to render upon subsequent clicks.
You will also need to compensate for Issue 1448 in the GMaps API v3. Something along this code should work to solve the off-centered map on subsequent renderings:
google.maps.event.addListener(map, "idle", function(){
map.setCenter(mapOptions.center);
google.maps.event.trigger(map, 'resize');
});
For reference, the updated jsFiddle with the above suggestions.
I had the same problem and after reading #19 of Issue1448 I decided to use onShow instead of onRender and then it worked like a charm. This way I didn't need to trigger any map resize event or trying to work out the center of the map.
Google Maps API V3 doesn't support the V2 GOverviewMapControl option, yet. I've come across a piece of code at http://dl.google.com/io/2009/pres/Th_1045_Maps_API_Mobile.pdf , silde 19, that gives the code to display the smaller map, but not the draggable, semi-transparent blue box that you generally see here. It's possible, but unofrtunately the code is 'ellided'. Anyone have any ideas how to generate this? Thanks
This is how it works out of the box in Maps v3:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Please note the last two properties of the mapOptions object. They do the trick.
Within the overlayMap, add a draggable marker to display the frame of the RectangleOverlay, and a non-draggable marker to display the semi-transparent box itself. Then, add bindings to some of the maps' events to update size and position of the markers, i.e. the maps' bounds_changed, drag, and/or center_changed events. Finally, update the location of the maps when the frame is dragged by binding a function to its dragend event.
I am using v3 right now and the overviewMapControl seems to work. Can't find any documentation on it yet.
overviewMapControl: true
Then you see a small arrow in the right hand side of your map. Click will open it. Can't figure out how to trigger this click with javascript (jquery) doesn't seem to work.
Check out http://code.google.com/p/gmaps-api-v3-overviewmapcontrol It's an open-source project to approximate the functionality of v2's GOverviewMapControl.