I have a project where I need to put many thousands of markers on a Google Map, and the only way to get it to scale enough for our purposes was to avoid the Google markers and use THREE.js to draw everything into a separate canvas layered on top of the map. Odd solution I know, but it works very well - almost.
One problem of course is that these will overlay the map controls. The further problem with this is that IE10, which I have to support, does not support pointerevents:none, so I can't control the map through this div.
I have tried the various IE10 pointerevents:none workarounds with no success. I have also tried declaring a separate DIV on top of everything and telling Google to put the controls there, but that doesn't seem to work either. I thought of using a Custom Overlay but I don't want it to be affected by map actions.
My question is, does anyone know of a way to accomplish this, to either layer the map controls OVER my new div, or to insert this marker canvas into the Map stack between the map and the controls?
Thanks very much!
I found the answer... declaring the DIV as a map control does indeed work. I wasn't doing it correctly. Thanks.
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.
This is the design of the markers (that also uses css animations, so I need custom html):
Markers design
The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.
So here are my questions:
1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?
2- If using custom overlays (https://developers.google.com/maps/documentation/javascript/customoverlays) is the best option, is there another way for moving them that is not removing and creating a new one?
Thanks in advance!
After struggling with this some time (it really took me several hours) I have manage to do it getting inspired by this fiddle:
https://jsfiddle.net/doktormolle/QRuW8/
The functionality is not the same, but I could get some ideas.
Since there is not a lot of documentation I have created my own fiddle with a working (and simplified) example, just in case is useful for anyone:
https://jsfiddle.net/javigbas/3zx5xa2u/
:)
I need to use Longitude and Latitude coordinates on a map that will be loaded in by an external program, and I need to be able to draw things on this map and be able to zoom in and out. Thing is, I cannot draw this map, and I need to be able to interact with both the map elements and with what I'm drawing.
I tried using Google, and found that I was able to control either my canvas or the map, but not both at the same time. Plus, I could not draw things properly on top of Google's map (I'm using Easel.js).
If anyone has any sources or advice, it will be much appreciated.
OK I figured this out with help from my web dev friend. He suggested I use Google Maps, and even though I have that whole "layering" issue (with all my events being captured in the canvas and not trickling down to the 'map-canvas' div), I should go and set up events that capture things like zoom and drag, and pipe them along to my Google Map, and the result is prefect for what I am looking for.
So now I have my Easel.js canvas on top of my Google map, and I just have to set up lat/lng positions for my objects when I want them to be part of the map!
Thanks for the help, everyone!
Hi Pardon me if this is repeat question or obvious one as i am new to programming
I am trying to implement an angular google map using this api. it has a property called options boxClass,boxStyle,content,disableAutoPan,maxWidth,pixelOffset,alignBottom,position,zIndex,closeBoxMargin,closeBoxURL,infoBoxClearance,isHidden,visible,enableEventPropagation as different values(seen from the JS file.)
Now i want to know what each one of those will do as it is not specified in their documentation. and mostly i wanna know how i can make the info window to appear on rightside of marker like shown here I designied the html for the infobox and when i give boxClass as the option the infobox is rendered properly but is displaying below the marker. i want it to be to the side of marker.
EDIT: let me clarify on certain points. I mainly wanted to know
1.how to remove the default close button and replace with mine. (which function to call for it to work )
2.how to use pixelOffset or another property to help me display the infobox to the side of marker as in example above without using margin or padding. gmaps api v3 specify the pixelOffset to be of type size. i tried various ways to offset the infobox so that it will shift but it seems i am using it wrong as the box either wont change its position or will be displayed at the top of map irrespective of the marker.
A lot of them are CSS properties that changes appearance and not really maps term. You can google them or learn from here.
What I want to do, is to display a simple google map (with basic, satelite and hybrid as options), add a custom marker to it, have it centered on a specific location, AND .. have the entire MAP faded out a bit so the marker would be more clear.
This last bit proves to be quite a difficult task, since I need to somehow fade the map, but maintain the marker and mapcontrols on top of the map, so the normal functions of dragging the map, zooming and clicking the marker would still work. If this was simple HTML, I would control it all using z-index values, but it looks like the markers are embedded inside the map tiles using canvases, so I'm really bound to using the google API to do this.
I've spent an entire day looking through Q&A here on stackoverflow, browsing the google API and trying to find some simple way to add a transparent overlay on a google map using API v3.
So far, the closest I can find about this, is to create a custom layer using KML and have it displayed as a control, but since I'm really not into how the KML works, this is really advanced, and I feel like I have to spend weeks to make this work correctly.
Is there really no simple way to create this transparency effect in a google map?
For simplicity I'm using gmap from smashinglabs.com, but I could easily switch that out with a more general google maps API call. This is the javascript-code I'm currently using:
$("#bmap").gMap({
latitude: 'fit',
longitude: 'fit',
zoom: 'fit',
maptype:google.maps.MapTypeId.HYBRID,
controls:[{pos:google.maps.ControlPosition.TOP_LEFT,div:$("#bmapoverlay")}],
markers: [extraMarker,{ latitude:XX,longitude:XX,html:'',
icon:{image:'*URL*',iconsize:[56,90],iconanchor:[28,90]}}]
});
Please note I've removed the long/lat numbers as well as the icon URL for the sake of privacy :)
Adding the DIV bmapoverlay doesn't work at all, and I would consider removing that all together.
Documentation for the smashinglabs gmap can be found here.
The gamma or lightness styler should work for what you asked. This is not a transparency effect, which means it will not allow to see any element that would be behind the map but it should achieve the fade out effect that you mentioned in your question.
See the documentation about stylers here.
Example usage:
var mapStyles = [{
"stylers": [{
"gamma": 6
}]
}];
map.setOptions({
styles: mapStyles
});
JSFiddle demo
Hope this helps!
Interesting question.
I am sorry but there is no way to apply any sort of opacity on map itself that can visually highlight your marker.
Using KML is seriously a bad option. Using KML is very once you understand it but it will not fulfill your case. Furthermore, it will make your map slow. You can try it by using world kml file and using the following tutorial:
KML files
https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk#rows:id=1
and
https://www.google.com/fusiontables/data?docid=1zn8cjdD6qlAFI7ALMEnwn89g50weLi1D-bAGSZw#rows:id=1
sample code:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
What I think will be best for your problem is that you create simple google map by sample code:
Now you add one more div above map div and set your opacity/transparency to it.
Next you add custom markers using D3. Here is a great tutorial/sample code:
http://bl.ocks.org/mbostock/899711
If you are not familiar with D3, do not worry, code is very simple. (If you need any help understanding this code of D3, please ask). You'll be creating markers using SVG.
Profit of using D3 for markers is that even if you place 1000+ markers on your map, it will not effect any performance.
Well you can also use custom style maps. Use following link and check on "lightness" and do modifications with it.
Regards,
Suyash