I have initialized the map on load and after clicking on a list item markers will be added to the map based on data from backend. After that by clicking a button the map should be displayed in another view.The map is displayed as a small square in the top left corner.
I know this problem is caused due to initializing the map onload. But I have few more map views so I dont want to initialize everytime.
Is there anyway to solve this?
I am using the resize method..But I want to know where exactly I need to use the function..If in div containing the map container, on which event should I attach resize?
When you are doing the resize, you could fire a topic publish and on the subscribe for that topic, you could fire the resize trigger within Google Maps API?
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 have used Google Maps on many websites in the past, but I have been posed with an issue I haven't experienced before. The maps window is showing, but it's only showing maps segments from the top left, and anything after that (even when i'm navigating around), nothing loads to the right. Its as if the window that is navigated around has an internal offset that is pushing it off the side of the viewport. Does anyone know what could be causing it?
EDIT
I have just discovered that when the window is resized, the map refreshes, and the layout is fixed.
The map is contained within a tab that is shown via javascript (and hidden via display:none). The tab container is loaded via ajax, and when it loads, the loadMap function is called. I tried postponing the loadMap function by enclosing it within a setTimeout function that delays the creation of the map by 1 second, but it still does the same (requiring the window to be resized to fix it)
This is a typical problem you'll run into when the map container is hidden or has zero dimensions at the time you create the map.
The usual solution is to do one of these:
Defer creating the map until the container element is visible and sized properly, or
Call google.maps.event.trigger( map, 'resize' ) after the map becomes visible or is resized. This event tells the Maps API to readjust its calculations of what's visible in the map.
It sounds like you've already solved it by using the first option, which is definitely the better choice of the two. Your page will load faster because you aren't spending the time to create an invisible map. If you do have a situation where the map size may change (e.g. a resizable window) then you can trigger the resize event when that happens.
Righto, I am not sure why it's not working, but I have changed my code to only execute the map creation function when the tab is first opened. That makes it work correctly
I have created a widget to display google earth and when I click the button, google earth disappears and is replaced by google map.
I am using the gwt earth 3 and gwt map v3. When I click the button the first time, google map is display well.
But when I click the button again, google map is displayed very small inside a grey area like that, which used gwt-map v2.
In gwt map v3, it doesn't have method checkResizeAndCenter(). So I want know if there is another way to fix this error.
Anybody can help me?
I think you had situation like,map widget get added to a panel having width and height greater than width and height of map widget.
I am creating a map with markers and I would like to have a common window placed in the top right hand corner of the map so that whenever a user clicks on a marker, the marker info is displayed in that info window. This doesn't to be an info window, it could be a div and is there a way, I can have more than one marker's info at the same time (i.e. have two div that display previous clicked markers)
The mapbox API solved my issues.
Any ideas on how to bind a click event to an OverlayView in v3 of the GMaps API? The overlays seem to be buried under the map's panes so clicking on the overlay results in just a zoom. I'd ultimately like to bind an infowindow to the overlay but just being able to click it would be a fine start.
Would just changing the z-index be the way to go? I tried this for a little while but couldn't get through all of the nested divs loaded by the map.
This is the demo I'm playing with: dutrack.com/markerShapes.php.
Edit: The overlays on the demo map are the large 'teardrop' icons and the paths. The smaller blue icons are Markers at the moment.
Consider placing your overlays in a different pane so that their z-Index is higher than. According to the documentation, getPanes().floatPane will get you the pane which is above all other map panes.
Also give your overlays a high z-Index so that they appear above other content in this frame.
Then use google.maps.event.addDomListener(..) to attach a click listener to your custom overlay.