I need to reduce the size of the default infoWindow tail to be 10px and centered to the map location i.e. the tail should be centered to the infoWindow and not one of the sides.
Is this possible and if so have you got any examples please?
Thanks in advance,
B
You need to make a custom infoWindow for that, have a look at
this example.
View Source in Google Chrome / Firefox - CTRL+U
You could also try to edit/use InfoBox from these libraries.
I don't think you can do what you want with just CSS since google uses images for the markers. Maybe a combination of CSS overrides and custom image(s) would do, but prepare to dig into a lot of messy (optimized) css/html.
Related
Currently, I'm working on a website where it is wanted to place the info window below the marker.
By default, when you have a map and click a marker, the info window will show above that marker, with the arrow point it to the marker. I would like to switch that around.
In the google maps api there is a section about pixelOffset that might work But I just don't get it.
This pixel offset, where would completely 0 be? And what if you zoom out.
I can't seem to figure out how this pixelOffset works and if it is really the thing I need to place the infowindow below the marker.
So my question in general is: Does someone know how to place the google map infoWindow below the marker ? Do I need pixelOffset for it or is this something completely diffrent?
Thanks!
It's possible to adjust offset using pixelOffset property, but I don't think that's what you want, because the arrow would always point downwards, not upwards to the marker.
What you want is more control over infowindow, and you won't get that using google.maps.InfoWindow class. There is a library called InfoBox which supports the same functinality as infowindow but have couple of more features, which allow for better customization.
Check this tutorial, the author is demonstrating very similar functionality to what you want to achieve. Basically you will create your own structure for the info infowindow, including the arrow yourself. Just using HTML and CSS. More in the tutorial.
One more thing, the link to infobox library is broken on the blogpost, because it has been moved recently to github, you can find it here. Download it to your project from there (either as infobox.js or infobox_packed.js which is the minified version).
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.
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
I am trying to add redundancy to map POI since quite a long time for a leaflet map i use on this page : http://worldisbeautiful.net/carte/
I'm sorry if my english isn't clear, that's probably why i'm having hard time to find a solution. See when you zoom out on this map, you have multiple world maps side by side but the POI are only on one map. Is there a way to have POI on each world maps, same positions ?
I understand there is an option nowrap to avoid multiple world maps but i like the idea of moving from left/right and having the earth rotating not just a plain map.
Thanks for the help !
This is a current leaflet limitation. See this support request
I think a workaround might be to replicate the markers with +360 degrees to wrap around the world.
I'm using CFGMap solution to place markers on a google map (API V3) but I want the map to always be centered on a certain long/latitude. Right now it seems to center on the last marker placed on the map so if the majority are where I want the long/lat centered then one random marker will take view miles away.
Any help on this is appreciated.
Thanks!
CFGMap is infuriating for it's lack of documentation. I don't use it myself; I only tried to track down something that might help you. On the face of it, it appears only to take a tiny subset of the full API functionality and doesn't offer much else.
From what I can glean from the testmap.js found here, it appears that you can only center the map on an existing marker in your locations array (see line 616 of the github file).
_cfGMapObj.resetCenterToLoc(index);
So, for example, in the source of the example is the line:
_cfGMapObj.resetCenterToLoc($('#locID','#printLink').val());
which grabs the number from the value of the current option in the select at the top of the page.
Now, if you chose instead to knock CFGMap on the head you could employ the Map API fully and set the center of the map using the setCenter method of the API.:
map.setCenter(new google.maps.LatLng(lat, lng));
e.g.
map.setCenter(new google.maps.LatLng(57.4419, -121.1419));
which in my mind is much easier. Plus, if you decided to do this, there are tons more articles on the API on StackOverflow than there are on CFGMap. YMMV.