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.
Related
Hi I am new to Google maps. I am trying to customize the design of the ui-gmap-window inside google maps in angularjs. So far my effort are in plunker. I am getting a result like:
With extra space on right and default close button (x).
Whereas I am looking for a result like below::
Can someone have a look at my plunker code and guide me in the right direction?
If you remove the width and height from your marker-holder element you will get rid of the scrollbars. But if you need a more custom layout, close button rounded corners etc you need to use a third party library for custom infowindows.
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 pretty simple question. Is it possible to create draggable infobox with Bing Maps Javascrtipt API?
Ergo when i click on pushpin on map the infobox will be shown and will be draggable within the map div.
Thanks!
This isn't built in, but you could create a custom infobox control that could do this. This isn't something I've seen anyone ask for before, so not aware of any blogs out there with samples. You would have to use the mouse events to do this.
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'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