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').
Related
I am trying to create a map using angular 9 google maps library. In resolutions from 320 to 599, i want my info window container out of map (because my content is such that, it has to come in column view) because it won't fit in the map window. But I am unable to do so. I am using custom Popups for that.
The solution to show InfoWindow outside the Google Maps Div might not be a great idea. I am not sure of how well that would work.
Another solution would be to register a Click event on the google map, and capture that information with an unique ID and pass that information to a box outside the div and display the required data.
I'm using Egmap Extension for map preview.The problem which i'm facing right now is when the page gets loaded map is hiden but after clicking display button map appears partially on the frame means in left corner some of the mappart is displayed.So to resolve this problem i was using map trigger code which is written below but its not working.
How should i implement this code in Egmap yii extension ?
google.maps.event.trigger(map, 'resize');
For yii Egmap extension it will be EGMap0 instead of map.So the code will be
google.maps.event.trigger(EGMap0, 'resize');
I am building a page that displays 5 small Google Maps using the Google Map API v3. Each map has a marker using a custom image and each marker bring the user to a custom URL on the click event on the marker. This part works in all browsers.
Under each of these maps, there is a "Enlarge map" link that display a zoom of the map in a "lightbox" like popup on the click event. These are actually placed in 5 hidden div that are displayed on the "Enlarge map" click event ( using $("#div").show(); ). On the click event, I also call the "resize" and "set center" events to make the display right.
In all browsers, when I click on the marker on the map zoom, it brings me to the custom url, BUT NOT IN CHROME. It's like Chrome has "flushed" the click event listener after the call of $("#div").show(); .
I also tested it with only 1 small map and 1 enlarge map link, still the same issue.
How can I fix this issue in Chrome?
The Google map info window will not appear when I click on a marker using the iphone. The same code works on the desktop on Android.
I need the map hidden by default and then loaded in only when the user clicks the view map button as I want to keep the weight of the page down as this is for a mobile site.
The click event handler is being fired as I put an alert on it and it worked. I think it might be something to do with the order of the code when I attacked the click handlers, but thats a guess. Also, when I add draggable: true to the markers the bubble appears but I dont want the markers to be draggable.
I have set up a test page http://www.clawg.co.uk/nearby/testmap.html
A run through of this is:
I scan the DOM for data attributes values which I use to create an array of data that will be used for info windows.
I create a button on the fly that will make the map appear when clicked
When the button is clicked the map api is loaded in if its not already available
The map is then loaded
The markers are positioned on the map
The default marker icons are too small for iphone 4 making them unclickable, so I used a custom marker that was 42x42 in size.
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)