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.
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'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
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.
I'm looking for a way to combinate the MarkerClusterer from google-maps-utility-library-v3 with the Infobubbles. My idea is to show the Infobubbles only when the icon is unclusted (visible). And maybe see a summary for each clustericon with Infobubbles. Unfortunately I didn't find any possibility to control that Infobubbles is only visible after the unclustering.
Maybe someone has an idea or an approach how to achieve this?
Thank you
Robert
If you listen to the 'clusterclick' event on the MarkerClusterer you will receive the cluster that is clicked in the callback. From that cluster you can call:
getSize, getMarkers, getCenter and getBounds.
With that info you can then open a InfoBubble at with the result of getCenter() and you and display the content that you want.
I'm using Google Maps v3.
I really like the InfoWindows found in Bing, as opposed to Google.
Screenshots & functionality found here comparing the two:
http://www.axismaps.com/blog/2009/07/data-probing-and-info-window-design-on-web-based-maps/
Question: How can I replicate Bing like InfoWindows while using Google Maps v3?
UPDATE: To be more specific, what I like about Bing's InfoWindows include:
- The pointer dynamically changes sides from left/right/bottom/top, as opposed to Google limited to only have the InfoWindow pointer on the bottom
- Bing's InfoWindows use less space
- You can configure Bing's InfoWindows to pop up outside of the map bounders so that you don't have to autopan the map to display the marker's InfoWindow
Check out google-maps-utility-library-v3. Specifically, look at InfoBox. It allows you to style the infobox however you want, although you have to do the styling on your own. I don't think you'll be able to have the infobox display outside the map viewport, but you can turn off autopan.