Learning and teaching with technology in the medical sciences
If you have a Google Map on a page that, for example, starts off hidden and is shown using JavaScript (inc. JQuery or another library), it seems to only load the top left map tile. In order to fix this, you need to resize the map after showing it, using the following line:
google.maps.event.trigger(map, 'resize'); //map is your google.maps.Map object
This is mentioned in the resize event in the Map class documentation.
I’ve just spent a while struggling to get a Google Maps API v3 Places Autocomplete search text box working in a Bootstrap JS Modal. It seemed as though the autocomplete wasn’t working at all, which I initially thought meant that I had messed up my JQuery selectors. However, it turns out that it the autocomplete was working (I could use the down arrow to toggle through the results), but the results were being shown behind the modal box. The z-index of the modal box is 1040 by default, whereas that of the .pac-container div that shows the autocomplete results is 1000 (defined inline).
Therefore, the solution (easy when you know how) is to change the z-index of the .pac-container div to greater than 1040, so that it appears on top of the modal. Since the z-index of .pac-container is defined inline, it is necessary to use !important to override this inline style with from an internal/external stylesheet:
div.pac-container {
z-index: 1050 !important;
}
When wanting to capture a change in the viewport (e.g. zoom, pan), when using the Google Maps API v3, the obvious event to listen for seems to be “bounds_changed”. However, when dragging the map to pan, this event is fired repeatedly, which, in our case, meant that there hundreds of requests being sent when a user panned.
The solution is to listen for the “idle” event instead, which is only fired when the user has stopped panning/zooming:
google.maps.event.addListener(map, 'idle', function() {
//Do something when the user has stopped zooming/panning
});