I'm making a subway map. The "transit" option on the official google maps shows their polyline below street/town names, but I can't figure out how to make mine do the same. Changing the zIndex to 0 (or negative numbers) doesn't work. Anyone know how to do this? Thanks.
Google Maps has several panes where the map components are being placed. Unfortunately for you the map tiles are placed below all those panes. Z-index has no effect if something is in higher pane, it only affects the order of overlays in the same pane.
Moreover map tiles are single images where all the map data are rendered. Therefore you can't place an overlay below some of the data rendered on the map tiles.
Theoretically, there might be a way to achieve this, but it's very difficult and I'm not even sure if it would work. Using styled maps you could create a base map type and an overlay map type. And then you could try to place the polylines between those two map types. Be sure there are many drawbacks:
I haven't tried to use styled map as an overlay map type so I'm not sure it would work.
Overlay map type is placed in the lowest map pane just above the base map. But polylines that are offered by Google Maps are rendered in higher pane and you can't place them into the lowest map pane.
Therefore it would be necessary to create your own special overlay layer or overlay map type containing the polylines. That is a lot of work! And then add it to the lowest map pane below the overlay map type.
OK, that's theory. Lots of hacking and uncertain outcome. I wouldn't do it that way!
Related
Google Maps utility library comes with a full map canvas overlay[1] which is pretty useful to create canvas based visualizations or custom layers (instead of the tiled based ones)
The problem is that CanvasLayer is based on an OverlayView and it has to be on top of all the map layers. My questions are:
Is there a way to place an overlay in between two layers (i.e tiled layers) ?
Is there a better way to implement a full map canvas layer which can be managed in the same way other layers are? (using overlayMapTypes).
For sure there are nasty hacks that can be done changing the DOM to sort layers and overlays but I'd prefer to do in a way it won't break when the internal implementation was changed.
[1] https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/src/CanvasLayer.js
I'm not sure what you mean by "map-layers" , but when you mean the mapPanes :
A CanvasLayer is not placed on top of all mapPanes, by default it's placed in the overlayLayer-pane(which is the 2nd lowest pane of the 7 mapPanes).
But it must not be placed there, you may place it where you want to by using the paneName-option of the canvasLayerOptions(set it to any valid mapPanes-name)
I am using google map v3 javascript api, and I try to create the custom map type according to the guide at google.develper.
However I found that the map type only provide one layer while my custom map type should provide two layers just like the google.maps.MapTypeId.HYBRID which contains two layers - the SATELLITE and the Placenames.
So I wonder if this is possible?
BWT,I have ask question about maptype and layers here.
It seems that the map type are made up by layers, is this true?
In fact, my first question is solved by Michael Geary.
However, I meet new problems now, since it is still related to the custom maptype, so I update this post instead of create a new question.
Q2:
How about the maptypecontrol if I have more than one layers?
As you can see, the google.maps.mapTypeId.HYBRID have two layers —— the satellite and the labels.
So in the maptype control you will find this:
Note the Labels checkbox.
Now I have two layers for my custom maptypes-- base and the labels, how to make the labels layer can be toggled?
A custom map type defines a DOM element for each tile, as described here. That DOM element isn't limited to just a single image. You can have a <div> with any number of images and other elements nested inside it.
The hybrid map type is implemented with this approach. Here is a screenshot of the Chrome DOM inspector showing a single map tile in the hybrid satellite view:
As you can see, the <div> has two <img> children. The first one, served from khms0.googleapis.com, is the base satellite tile image. The second one, served from mts0.googleapis.com, is the labels and borders overlay tile with a transparent background. This is all just a single map type as far as the Maps API is concerned: the API only knows about the container <div>, not the images inside it.
The base map example in the Base Map Types section of the documentation illustrates the use of <div> elements as map tiles. You could use that as a starting point and add your <img> tiles inside the <div>.
The closest example of what I'm trying to accomplish is a store locator. I have 6,000+ locations that need to be plotted onto a map of Canada.
My original plan was to use Google maps to place markers on each location, but it doesn't make sense to plot them all every time someone attempts to view the map, or various parts of the map.
How does one only put markers on the locations in view? Do I have to send the geo data of all 6000 locations to the client each time they load the map?
Is this doable with maps? (I'm sure it's got to be) Or is there a better service for this kind of thing?
Definitely do not draw all the locations at the same time if they are not all visible. Consider using MarkerManager (article here) or MarkerLight (code: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/, demo: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/randommarkers.html). If your initial map and data is such that all the markers would be visible initially, this is definitely the way to go.
You can also use the GEvent object (docs) to detect a "move" event, then check the current display coordinates, draw any that are in bounds. This is the best route if your initial map is too zoomed or small, and/or your marker set is too large to fit on the map's initial view. Your user will be moving the map around, so you can react to that movement and only draw the relevant markers. Take a look at http://econym.org.uk/gmap/gevent.htm for a list of other GEvent events (couldn't find an official list on the API), you might also want to watch "zoom" events.
The two methods can also be combined.
You can use getBounds() to determine the viewable portion of the map. I'd use this data to request from the server all locations within those bounds. Use the bounds_changed event to monitor changes to the viewport and request additional locations as necessary. You'll probably want to set either a minimum zoom level, or maximum number of results to avoid displaying too many locations than is reasonable. Eg, when the map is zoomed out to display all of Canada in a single view.
I have some thumbnails with gps info that I want to pass to a javascript google maps instance. I can get the points to draw on the map, center and zoom to fit, and I can replace the markers with the thumbnails.
This is close, but I'm looking for something that I can style (border, size, etc) and show more of a precise location, like a popup bubble like in google maps business search.. I've looked at the chart library, but that doesn't seem to be anything more than text and their icons.
I also like the way the panoramio (when you turn on photos in a google map) will scale the majority of images down and deal with zooming.. are there public libraries or functions we can use that do this stuff?
Thanks
Something like this? http://jsfiddle.net/Kai/Unh2M/embedded/result/ Its using an InfoWindow to display the picture when you click on the pin.
You can view the source on that at http://jsfiddle.net/Kai/Unh2M/ and check the reference on InfoWindows at http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
I am developing a Google Maps application and I've run into this problem. I need to remove all markers which are out of bounds from the map.
Is there any simple way of doing this, besides keeping an array and looking at the latlng of each marker?
I cannot use MarkerManager because I have way too many points. I don't want to use clearOverlays() because it would close any open marker.
Any help would be appreciated.
If you don't want to look at each marker individually then cluster them into some sets initially and calculate the bounds of the set.
You can then show or hide the sets depending on what is currently showing on the map (you can find the boundary of the map using GMap2.getBounds() ).
How many points are we talking about?
Update
A. About 65K.
I can see why you can't create 65K GMarkers when the page loads. That will take over 5 seconds.
I'd cluster them into groups of 200 ish and when the edge of the group gets within a 1/4 map width outside of the displayed edge then find, create markers and display the adjacent group. It it goes outside of 1/2 a map width of the outside edge then hide the group.
Other alternatives are to use a third party library such as
Cluster Marker - http://googlemapsapi.martinpearman.co.uk/articles.php?cat_id=1
Clusterer - http://www.acme.com/javascript/#Clusterer