I have implemented a Google map by using the Google Maps Javascript API v3 Services. When the page loads, the map displays only in the top-left corner of its div container, that is, it displays only in one-forth of the div container, and the remainder is blank.
However, when I press F12 to inspect the code (with Firebug), suddenly the map will display completely.
What's going on here?
It happens often when you init the map and position of map's container changes.
Try to call after loading map and all messings up with DOM:
google.maps.event.trigger(map, 'resize');
You want to try the google ajax google loader. google.load("maps","2"). It's working for me because the loader makes the map work even when I'm switch fast between many other maps and do many travel-salesman-meta-heuristic on the map.
If hsz's solution doesn't work, it may be because the resize event needs to be triggered later. This code worked for me:
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
});
Source: https://stackoverflow.com/a/17060345/12484 (credit: Ian Devlin)
Related
I am using google maps on my website and it displays as the following.
Website
Click Location Tab to view the Maps.
Because the map is hidden at first, you must trigger resize event.
google.maps.event.trigger(map, "resize");
From documentation
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize').
is it possible to activate the keyboard bindings of Google Maps (StreetView) immediately after page load? I found a working example here, unfortunately it uses the Google Maps API v2 which is no longer supported. If you embed a normal Google Maps StreetView, keyboard bindings works not before you click on the map initially (see here).
Is there a possibility to do this in v3? I already tried this and this without success because thats not working for streetview.
Update: with keyboard bindings I have especially the arrow keys in mind to move around the map
Thanks
Greetings
Ok, found a solution and created a Gist for that.
The solution proposed by #ChristianB did not work for me. Maybe because it works for an older version of the Google Maps API (mine is v3), or it uses a different rendering mode (mine is webgl, which uses a canvas).
What I did is wait for the position_changed event to trigger, then set a tabIndex attribute on the canvas element, and then trigger the focus() on the canvas element. After that the keyboard bindings work.
The code:
var panorama = new google.maps.StreetViewPanorama({
...
//forcing webgl
mode: 'webgl'
});
//Set an event listener for position_changed,
//this will be triggered the first time the panorama is loaded,
//and every time the position changes
google.maps.event.addListener(panorama, 'position_changed', function() {
//This is how to get the canvas in my current version of the Google Maps API,
//note that this might change in the future.
var canvas = document.querySelector('canvas.widget-scene-canvas');
//first set a tabindex on the canvas,
//without it focus will not make the canvas the active element
canvas.setAttribute("tabindex", "-1");
canvas.focus();
//To test that it worked you can check that document.activeElement is the canvas
console.log(document.activeElement);
});
You might want to put the code in a separate function and call it any time the canvas loses focus.
Code tested in Google Chrome v55.
Last weeks I had a problem with google maps. The map is loaded partially so I search about this but i couldn't find a solution.
I put this code on the resize event as some people suggest but still the same problem occurs.
$(window).resize(function () {
google.maps.event.trigger(map, 'resize');
});
map is the variable where i store the map object.
Could someone give me a tip?
Thank you in advance.
Using Google Maps on my site and when I click on the Pin It bookmarklet imported to the bookmark bar from their pinterest.com/about/goodies/ page, it picks up Google Map images.
How can I specify not to pin images found inside a div tag which contains google map widget?
I cannot individually add nopin attribute to google map images as those tags are generated dynamically by Google Maps library.
This is what I have done in my map initialize method. I am using jQuery to add the nopin tags to the images after the tiles are loaded.
google.maps.event.addListener(map, 'tilesloaded', function() {
$('#map_canvas').find('img').attr('nopin','nopin');
});
This is a slightly simpler answer that is a little more robust. I only found your answer after dealing with this myself. Just want to pass along what I learned.
google.maps.event.addListener(map, 'tilesloaded', function(){
$('div.gm-style img:not([nopin=nopin])').attr('nopin','nopin');
});
This will work regardless of your map's id, cuts out the unnecessary find(), and only runs against images that are not already marked with nopin. In this way, it won't be negatively affected regardless of how many maps you have on the page.
I am trying to figure out how i can attach a click event to a google maps v3 compass.
I have created a function that re-draws markers on a map and want this to be fired when the user click on the compass (arrows top left) of the google map.
I am working with google maps v3 and cant seem to find any way of doing this through the documentation.
Does anyone know how to do this?
Thanks in advance!
Click event of the compass is probably attached to the bounds_change event. Essentially, you are changing the bounds of the map.
You can listen to the center of the map changing:
google.maps.event.addListener(map, 'center_changed', function() {
// Call your function to redraw markers here.
});