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).
Related
I need a lib recommendation or a solution that allows me to place a marker on a PNG, and save the marker location. The marker has to be a html/css element, allowing the user to click on the marker to open a new window or create a new marker (and save the X-Y loc).
"Why not use leaflet or google maps api?"
I cant use libs like leaflet because I need to use a user's uploaded image (can't be map tiles/layers), and the image can come in different sizes (but not big as a map)
My lack of knowledge made me think map libs wouldn't work for me, after a little research I found out leaflet do what I needed. I found a way to use leaflet without preprocessed map tiles. Basically What i've done so far. codepen.io/renanreddy/pen/bGYyQyV I guess thats what I was looking for. Still have the issue of "any image size", but its a start.
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.
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.
I just came across the fantastic DrawingManager class for Google Maps API v3 -- which is exactly what I need for my "create a map" webapp.
Alas, adding a marker tool only drops the marker itself onto the map -- I need the ability to add infoboxes to markers, preferably similar to how Google Maps Engine does it (I.e., you place a marker and can click on it to set title and description).
Is there something I'm missing (Possibly a property I need to set to get this type of behaviour), or will I need to wire together my own implementation? If the latter, know of any helper classes that might make this easier?
Thanks!
In the first link you posted, at the bottom of that page there is section "Drawing Events" which begins to explain that the DrawingManager would have an event 'markercomplete' which returns the actual marker instance. See also DrawingManager api docs (see events and their arguments) https://developers.google.com/maps/documentation/javascript/reference#DrawingManager
So, once you have access to the instance of the marker which was just created, it's just a matter of creating InfoWindow's and handling things from there.
//code
Here is an example fiddle for you: http://jsfiddle.net/A96Hu/
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.