Does anyone know how to hide the base map in Google Maps V2? I've added the following lines in my attempt to remove the standard map types, but it seems to insist on showing some sort of base map:
map.removeMapType(G_SATELLITE_MAP);
map.removeMapType(G_HYBRID_MAP);
map.removeMapType(G_AERIAL_MAP);
map.removeMapType(G_PHYSICAL_MAP);
I'm adding a KML-overlay using GGeoXml, and that's basically all I want to show. I've also tried to add a blank white KML-layer between the base map and the actual data, but with no luck. Anyone out there who knows how to hide or disable the base map?
In case anyone's having the same issue, I ended up solving it by simply making all the Google-generated map images transparent using jQuery:
jQuery('#map img').css('opacity', '0').css('filter', 'alpha(opacity=0)').css('-moz-opacity', '0').css('-khtml-opacity', '0');
The selector finds all img-tags below the map div id and sets opacity to 0 in most browsers. Left to display on the map is only the KML overlay, which was just what I wanted.
Related
I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
I have a google map as page background and a few div layers above it. When I place markers on the map I would like to be placed in the visible part of the map, not below the divs. In other words.. I need to add padding to the map so the functions like fitBounds(), setCenter() and etc. to position the markers in the visible part of the map.
There are many examples around but none of them looks quite well or it is working at all. Most of them are similar to:
I have tried to calculate the bounds and to extend bounds with some padding but it is a two step process. At first.. the map is positioned at original bounds to get the correct projection and then it is animated to the extended bounds. It doesnt look professional, we have two fitBounds() and the second one is animated. http://jsfiddle.net/seddass/CuKTK/
I have tried to add custom control to my map but it seems that the custom controls doesnt add padding to the map as suggested on many places. http://jsfiddle.net/seddass/wtT3t/1/
Can anyone can provide a working example or a better solution for padding to for Google Map v3? Thanks in advance!
So basically what i'm trying to achieve is this functionality in google maps v3,that they have in openlayers: http://dev.openlayers.org/releases/OpenLayers-2.11/examples/image-layer.html
Hide the base layer of googlemaps (the actual map), and then add a image overlay that is placed over the entire surface of the map.
Is this possible? and do anyone have any solutions at hand?
It's called a GroundOverlay: https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay
However, while a GroundOverlay covers the base map, it does not remove it. You'd need a custom map type for that: https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
It would be fairly easy to develop a custom map type that always returns a blank tile.
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!
I would like to know how to create effects / animations over Google Maps markers. Specifically, I would like to zoom-in/out or "fade" a marker after a given amount of time. Could it be possible with HTML5 ? Is there any jquery effect library for doing this?
(I could use a map tile server for creating map tile overlays and re-generate tile overlays every second, but I guess it is very processing-intensive...)
Thanks in advance
I haven't seen any library to do this, and there isn't functionality in the API to fade Markers per say.
Instead, what you can do is simulate markers by creating your own Custom Overlay that looks like a marker. A custom overlay usually contains a div, which you can easily control the opacity of using JavaScript / jQuery based on a class or id you assign during the custom overlay construction.
As an example, if you look at this page you can see the is a button used to toggle the visibility, you could just as easily change that JavaScript to control the opacity of something.
I am looking at doing something similar.
If you set the marker option 'optimized: false' for all markers, each will have its own element, you can then use jQuery to select all the markers on your map using something along the lines of $('#map_canvas img[src*="filename"]'), assuming that you're using custom images for the markers.
What this doesn't address is relating each element in the array returned to a specific marker.
I think that you could add the markers to the map one at a time, re-run the jquery selector, and compare the elements returned vs. the previous run, to see which element was new. I haven't tested this part (I have what I say in the first paragraph), as I'm working towards something slightly different.
You should then be able to adjust the opacity/size of the image directly.
This might get clunky for large numbers of markers.
Paragraph two above is stupid.
Add a marker to the map, making sure to set the optimized:false option. then
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
The newly added marker won't have the class, so will be the only element selected. Before setting the className, you could set an ID, add the element to an array in the same index position as the corresponding marker object is held in another array, etc.
This should be a lot less clunky to implement than what I proposed previously. I'll try and come back with a working example soon.
I suppose if you knew that there were groups of markers that would share the same transform (zoom/fade), due to being the same age or whatever, then you could add all of them and only do the jQuery select at the end, before looping through the returned elements setting a class that would allow you to adjust them en-masse.