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.
Related
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/
:)
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).
In Leaflet there is an option for icons to be div's instead of images. Which meant you could make a marker which is just text, essentially a label which could be moved by the user. Which is what I am trying to reproduce using OL3 with no success.
Is there anything available in OL3 to have text on the map which behaves like a Point feature? As in, can be moved in edit mode and attached to the map in a vector layer.
Yes it is possible if you set correctly the style for markers (without using an image):
new ol.style.Style({
text: new ol.style.Text({......
Look at the following working example:
http://jsfiddle.net/pfavero/yabta24t/13/
I think Overlay is what you need: see http://openlayers.org/en/master/examples/overlay.html
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.
Hey folks,
I was wondering, if it's possible to create marker-icons that can be updated/altered as soon as the AJAX-function pulls new data from the server. To give you an example:
I have several markers representing different people. Now if one of them posts a new message to the system, AJAX fetches it and passes is to the Map-Object. Now I'd like to pop this (event) into the map by either opening an InfoWindow next to that person, or - and this is the preferred way - to add a tiny red icon next to the marker-icon, just like you know it from the top-navigation in Facebook (e.g. you have 5 new messages and 3 friend requests).
And if the icon is clicked/the InfoWindow open, I'd want to remove that extra icon from it.
Is there any possibility to do this? And what would be the fastest (in terms of benchmarking) way to go with? Maybe with additional overlays? Or would I have to calculate the pixels within the viewport and add onto it?
Now it's your turn... :)
Thanks a lot!
The easy way would be using setIcon() function of the Marker class.
It is quite possible to use another overlay and the trick is to calculate the pixels within the viewport. You can avoid that by using a transparant 'red icon' and overlays it on top of the existing icon using the custom overlay classes (http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays) by using the position of the icon.
If you really want to calculate the pixels, you can search for 'google map contextmenu' and refer to how people do the calculation.