I'd like to setup a website using Google Maps API V3 using a custom overlay interface the way you can see it on this website (right hand side) http://predict.habhub.org/
I've searched Stackoverflow and the developers website of google, but couldn't find any helpful information.
Are there any samples, best practices?
You use absolutely positioned elements for this, with a z-index higher than 9 (which is the z-index of the gmaps map container). For the dragging, you would then apply whatever jquery library you like to pull the elements around, as long as they are position: absolute;.
JSFiddle
Related
How can i change the marker icon on directions on google maps?
NOTE: The dirty approach of pure CSS based on the classes ids of container elements is not accepted nor a js search-and-replace the img src.
After expired bounty and lots of research im answering my own question: In Google maps API v3, since 24 June 2014 there seems to be no official way to change these markers.
Possible dirty solutions:
CSS:
set display:none to whatever class the image is, and set a custom background on the parent div. set width and height accordingly.
Click functionality between "directions"-"markers on map" will be maintained, but something as little as a change in the class name returned by the API will cause problems. Not semantically correct as the image displayed is a background of a div, and its not clickable.
JS:
Add a listener and after the directions call, when map is idle, search the markup for the image and replace the img src. Will fail if markup returned from API is changed since you have to select by id, class name or something similar.
JS:
Scrap the data, and re-render as you wish. Click functionality between "directions"-"markers on map" of course is lost, and still unstable since is based on scrapping.
In any of the above cases you ll have to suppress markers in markerOptions and also change the marker that is used as point "A" and point "B" to match your dirty solution result.
Will be more than happy to see a better answer than this.
Is it possible to make divs with for example five or six corners?
I need this to make clickable zones on a map. If there is another way to achieve this I would be delighted.
No, you can't. A block in HTML is rectangular.
And even if you change its look using (expensive) css based tricks, the clickable zone will keep rectangular.
But there are several solutions for clickable zones :
simple computations with javascript from the event coordinates on click
the old image-map format
If you want to do it in javascript without image maps, you may be interested by ready algorithms to decide if a point is inside a polygon.
If the map is an image, use a polygon imagemap. There are several web apps that make it easy to create these (just Google "imagemap generator").
If you're using a mapping API like Google, they'll have documentation on creating clickable targets within the map (for example: Google Maps Docs).
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.
We are building an online map (like Google Maps) and we ran into layout related problems.
When I go to the Google and Yahoo maps, I see that in their page almost all the elements are using absolute position, so they have to re-caculate the size of each element when user resizes the browser window.
So I wonder if we should leave these to the browser?
This is to make it more portable. Older browsers just don't handle relative layout well, i.e. correctly.
I am developing a website where i am using CSS based layouts with absoulate positions. I would like to know is there any plug in for IE 8 which will tell based on the mouse where i am moving with the position (In Pixels).
I want to know with out any JS. I am looking is there any external plug in which will allow me to find out the position.
Do you mean a plug-in for the browser that will show you the mouse cursor’s position, whilst you’re developing the site?
I haven’t heard of any plug-ins, but you might try Andy Budd’s layout grid bookmarklet.
Doesn’t quite give you the mouse cursor’s position, but might make it possible to make it out.