How to make a Google Map interactive with website content - javascript

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.

Related

How can a put a static picture over Google Dynamic Map?

I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.

Add a back button in google maps

My current implementation is, when I open the html via browser it zooms to North America map with 4 markers. On click of the markers, the maps is zoomed to that location with few more markers added. Now I would like to add a back button so when the button is clicked it should take me to the initial maps page with 4 markers.
Your help is much appreciated.
Thanks,
Chitra
The features of Google Maps API that you will need to use are bounds. For a rough understanding, imagine providing a top left corner point and a bottom right corner point and just telling the viewport to zoom and track to fit them in. There is a good answer here: Google Map API v3 — set bounds and center
As for how you implement the actual button to trigger the feature, that is a separate question and there are many potential solutions. Again, it has already been discussed here: Put a button on top of a google map

Show/hide div when clicked on marker

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

Custom InfoWindow size/pointer position in Google Maps API

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.

Parse kml with geoxml3 in maps api v3 but stop rebuilding the sidebar when bounds/zoom changed

I've found a great page that demonstrates many uses of the Google Maps Api v2 and v3.
I tried to understand each line of the javascript and make something similar to what can be found on the page linked above.
However I can't understand two things:
In my application I don't want to rebuild the sidebar every time the zoom/bound/mapcenter changes. Currently the sidebar shows only placemarks that are visible on the current mapview. When the user zooms in and a placemark goes out of the view it disappears from the sidebar too. It could be annoying when you already scrolled somewhere and with only a little zooming you loose your scrolled status. Also if you bind events to sidebar elements, changing the view on the map rebuilds the sidebar and your events are finished.
I tried to rewrite the piece of code that creates categories from the placemark's styleurl property to apply to polylines as well not just markers, but I have no luck.
If you are deep in this kind of work please point me to the right direction.
Thanks.

Categories