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.
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
So this might be a bit tricky to demonstrate, since the problem only appears occasionally and unpredictably--hopefully the problem shows up when you view this question (or, alternatively, has stopped appearing altogether!).
We have a Google Maps implementation on our site that displays paginated search results on a map. The current page's results appear as regular Google Maps markers (with custom icons--these work fine), but the other search results appear as smaller markers in a KML layer. An example:
http://www.redflagdeals.com/in/verdun/map/
The large markers are squarish pin images; the small markers are coloured dots. Blue and purple markers/dots simply refer to different types of content. In the KML file, we've specified two Styles, one for each content type. Other than the Icon reference, which points to the different pin images, the two elements are exactly the same. Here's an example generated KML file for reference:
http://www.redflagdeals.com/in/verdun/map/?do=map_kml&longitude=-73.56895400000002&latitude=45.457064&order=deal_price&dir=asc&category_filter=0&content_filter=0&tag_filter=0&keyword=&page=1&show=deal%20coupon
Most of the time, our map shows the large and small markers perfectly. Occasionally, though, some or all of the small pins show up without the custom icons, instead reverting to the generic blue Google marker image. Today, the custom minipins that show up in blue are broken, while the purple ones are all fine. Other times, both the blue and purple ones are broken.
The problem usually fixes itself, leaving us clueless as to the cause or the solution. The only theory I have is that we use a CDN to host our marker images, and occasionally we push a new version to the CDN while updating all the filenames simultaneously (as we have CDN version numbers in the URLs for our images). Maybe it's possible Google is requesting one or both of the small pin images right when we're pushing a new CDN version, getting a 404, and giving up immediately. But that would mean Google caches the KML images (or lack thereof) for quite a long time. Other than that, I have no ideas.
Is there anything we can do to prevent this problem from cropping up in the future?
see this post (Comment #4 specifically) explains caching of custom markers
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3864
I've just tested this, the result is the following:
I'm sure Google caches both, the KML-file and the marker-images.
(Of course they do, otherwise they must load the files and create new tiles on every single request )
So when you change any marker-image, you must change the URLs of the marker-images inside the KML-file.
You also must change the URL of the KML-file inside your application(otherwise google will not recognize the modified image-URL's)
It's sufficient to append a random parameter to the URLs
I have a number of events in the US. I have addresses for these events, but it varies in accuracy. Some might be the full address, some might be just "Austin, Texas".
I'd like to plot these programatically on a map on a webpage with a marker as they'll change fairly regularly. The marker should be an internal link to the relevant row in the table of events lower down on the page.
The image doesn't need to be updated on the fly, just on the (say fortnightly occasions) when an event is added (e.g. a cached image is cleared and recreated)
Rather than use Google maps, I'd like to plot these on top of an image like this: http://0.tqn.com/d/geography/1/0/9/H/usa3.jpg
How would I go about putting markers on this image that correspond to the (rough) geolocation of these events?
Your best bet might be to use google maps and plot the locations and then just pull an image of the map - that way you can let google do all the work of placing the pins but not have to worry about people zooming, since it is a static image file.
Beyond that, you can type the locations into any mapping service to get a rough idea of the location and then place markers or dots on your map file in the same location. This would allow you to choose whatever image or color you want the icons/markers to be, since you will find and place them yourself.
I need to create a static image of google map with several markers, and each marker has a custom icon.
In the Api DOC there is the note: Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.
The url is very long.... There is the position for each marker and the URL for the custom icon for each one.
I've already tried with POST request ma it is not supported.
There is another way to create a static map image without max length limitation?
A possible way might be this, but i don't know if is it possible: I've create my custom map using the function in GMaps, and i have added all the markers i need.
There is a way to access in static way to this particular map? so in the url i have to give only the center of the map and other parameters (zoom, ...), but all the markers are already positioned.
Or... another idea... Can i submit the URL of a KML with all markers positioned instead each single marker position+icon url?
FYI, Google recently updated the limit to 8192.
Have you tried using a URL shortener for the icon urls? I believe the static map API will respect services that make URLs shorter... might save you a few characters.
You might wanna check out toopola´s API to help working with Google Static Maps, I am about to make my own attempt.
Another idea
find map area that contains all the markers
divide the map area into rectangular pieces (4 pieces for example)
create image url for each part, but include in url only markers and icons visible on map
show images
Мethod of division depends on the markers position.
Yes, you can definitely do this with the Javascript API.
I have built a few applications using that API. It can be a little tricky to get your head around, but it is pretty good. For what you want to do, it would not be too difficult. If the user has to be able to interact with the map and add pins and such, it starts to get a little more complicated because you have to capture clicks and such.
Does the map its self need to be available as a URL, or does it just need to be embedded on some page and that URL can be used?
The Javascript API will work best if you can embed the map into an existing webpage.