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
Related
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?
I have a custom Google Map containing many markers, each of which contains an image in its infowindow. When I embed the map on a site, the page seems to be downloading every single one of these images when the map is viewed, which results in an unnecessarily enormous page size (around 50MB on every view of the page). Since these images are loaded from our own server, that potentially represents a massive and unnecessary amount of strain on the server / use of bandwidth.
Is there any way of telling Google Maps not to pre-download these images, but instead to AJAX load a marker's content only when that particular marker is clicked on? Since this is the default behaviour on non-custom Maps, it feels like there must be a simple way of doing this.
I assume you mean the infowindows contain the image? You could use the InfoWindow.setContent() function to dynamically add content to an infowindow. Do this in conjunction with the event listener you already have in place that opens the infowindow, to do the ajax request to get that content.
I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.
Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:
have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Option 2 is not what I want to be coding right now.
Anybody know of a way to achieve Option 1?
(Google Maps API v3)
I would try to set high z-index(say 1000) on the div that wraps the info bubble.
I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.
You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').
I created a public map using my Google Map. I want to set a default zoom level, but it is not saved. Is this possible?
Also, is it possible to change the list of place markers?
the reference map that you supply (quebec summer festival) is called by the URL: http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
notice that the last parameter "&z=15" defines the zoom level (in the embed map code, "&z=15" becomes "& a m p ; z = 1 5" [remove spaces between letters]). if you change this you can increase or decrease the zoom level. if you suppress the zoom level, googlemaps will automatically calculate a zoom level when displaying said map. NORMALLY this leaves some of your map outside the frame.
so, just by supplying the URL with the desired zoomlevel you have solved your problem. this works very well with static maps. if you have a dynamically generated map (from a database, for example), the fastest solution is to put 2 markers (top left and bottom right corners) slightly outside your boundary box. this will force automatic zoom in the desired amount (hopefully).
Not using API just made a map points using my GMail account and made it public, like the following site:
http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
Nothing is saved by a web page. HTML browsing is stateless. If you want to save some information you will need to use similar trick as any other web applications. E.g. putting it in cookie and the setting the zoom level using the information in the cookie when you initial the page.
On of the drawbacks of google maps infowindows is that map will move to make room for the infowindow to display. ebubble( http://econym.org.uk/gmap/ebubble.html) overcomes this limitation, it doesn't move the map. However. it has its own limitations (you can't leave it on, like the infowindow, due to the way it works (it immediately hides). Also, the bubble, being absolutely positioned, might get cropped)
Are there more alternatives to the infowindow that doesn't move the map, besides ebubble?
Depending on your needs (which aren't totally clear from your description), you might consider MapTooltip, which lets you put arbitrary HTML into a tooltip. I haven't used it, but it's mentioned in this excellent presentation on Google Maps.
Alternatively, you might be able to make the InfoWindow do what you want with some event handling code. movestart and the InfoWindow's onOpenFn might let you do this - try catching movestart and remembering the map's position, then in your onOpenFn restore the position. This might look ugly, though.
Did you see the EWindow?
If you are willing to use the Google Maps Flash API, there is a way of opening info windows without the map panning. The info window stays open until the user closes it. The user can move the map while the window remains open.
Link to example here.
Right click map to view source.
Have you tried using InfoBubble? I like this implementation better than the default InfoWindow.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html