I'm new to javascript and no idea where to start digging information how to implement my idea. I want to open a div like a pop-up over the map when a marker is clicked. I have around 15 markers and every marker has different content and images. The pop-up layout will stay the same. I believe making a div is easier than making a infobox, true?
this is my photoshop sketch:
Sketch
And this is what I have so far:
Demo
What should I try, read and investigate?
You could just use the info window of google maps
see https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
and customize it's contents.
like in this question: Google Maps API v3: Custom styles for infowindow
Related
With the Google Maps JS API new renderer, as of v3.32, infowindows placement seems wrong. They are not panned outside of map controls areas. The best example is directly from Google Maps Platform docs. If you go here and click on the marker you'll see what I'm talking about: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
See bottom of question for printscreen.
I searched a lot for some information on this change of behavior, if that's by design now, in case we'd have to handle this in code, but can't seem to find anything regarding this. What would be the API way to deal with this ?
Looks like it's partly been fixed in the weekly channel (current = 3.34). So you can load your map with https://maps.googleapis.com/maps/api/js?v=3.34&key=...
and the infowindow should move out of the map control's areas. It seems though it will not pan out of custom controls areas, which it used to do before the new renderer.
I have a Google Map that I created in the Google Map Maker with custom markers on it. This map is embedded in my website.
What I'd like to do is set it up in such a way that when a user clicks one of the "pins" on the Google Map, a div becomes visible on the website that provides more detail on that pin. When a user clicks another pin, the previous div goes invisible and the relevant div becomes visible with more detail on that pin etc. I know how to hide and show divs, its just the interaction with the Google Map that I don't fully understand.
I understand this is most likely a job for JavaScript, but I'd love someone to point me in the right direction.
Here's the site in question http://oliwebconz.ipage.com/destinationwaikanae/stay.html
Many thanks in advance!
Ollie
Take a look at this documentation page from Google. It shows you how to execute a function when you click on a marker on the map. In the pages around that page you can find more examples of adding listeners to ready events, map click event, zoom events etc.
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
Hey guys -- I was looking to create an entire custom info window for pin description.
I am not looking to insert a custom div within the popup window, but actually redesign the window itself.
I saw an article on here http://koti.mbnet.fi/ojalesa/boundsbox/tiptool_trains.htm
This is not what I'm looking for, the rounded bubble needs to go
I was hoping to find an article or some tips on how to go about this?
Right now I'm thinking of creating a custom overlay by extendin some functionality of some extendable classes/functions of the API.
Where would a good place to start be? Has anyone done this here?
Thanks guys!
There is a custom infowindow example in demo gallery section of the google map api documentation.
You could add a click listener (using google.maps.event.addListener) to your marker and then build your own popup when the marker is clicked:
google.maps.event.addListener(marker, 'click', function() {
/* build and show your popup in any way you want. */
});
If you're thinking about the little tooltip-ish popup from your example, then you'd want to bind a listener to the mouseover to popup your tip and mouseout to get rid of it.