I am creating a map with markers and I would like to have a common window placed in the top right hand corner of the map so that whenever a user clicks on a marker, the marker info is displayed in that info window. This doesn't to be an info window, it could be a div and is there a way, I can have more than one marker's info at the same time (i.e. have two div that display previous clicked markers)
The mapbox API solved my issues.
Related
Instead of the default position above the marker , I want the InfoWindow to be open to the top right corner of the map . How to do that ?
Infowindows may be attached to either a marker object or on the map itself at a sepcified lat,lng. That being said, if you allow users to pan your map, there isn't a good way to put the infowindow at the top-right corner of the map. You can only anchor it to a marker or specific lat,lng. Moving the map will move the infowindow whether it is anchored to a marker or a lat,lng.
One possible thing you could do as a workaround is use custom controls as documented here:
https://developers.google.com/maps/documentation/javascript/controls#CustomControls
You can put these custom controls at the top-right corner of the map. Depending on what you were wanting the infowindow to have inside of it, you may be able to use the custom controls in the link above to accomplish what you need. The custom controls are really intended for user interaction, but if you need to have an info-window at the top-right of your map to display information, I believe this would be a good workaround.
I hope this helps!
Am trying to display the locations in map which i have in my array i have listed the locations on the left side. if user click any of the locations on the list the map should display that particular location and info Window. The problem here is if i click on any other location the previous clicked info Window still appears on the map how can i hide it in the map?
My code
you are creating a new infoWindow instance every time you click one of those locations and not saving them for further use.
i have modified your code inside two functions
1. populateInfoWindow
(added condition here to check if there is an infoWindow created already,
if yes then use that else create new and save it under the same marker)
2. showListings
(if marker visibility is false then call close function of its infoWindow)
working CodePen
I have initialized the map on load and after clicking on a list item markers will be added to the map based on data from backend. After that by clicking a button the map should be displayed in another view.The map is displayed as a small square in the top left corner.
I know this problem is caused due to initializing the map onload. But I have few more map views so I dont want to initialize everytime.
Is there anyway to solve this?
I am using the resize method..But I want to know where exactly I need to use the function..If in div containing the map container, on which event should I attach resize?
When you are doing the resize, you could fire a topic publish and on the subscribe for that topic, you could fire the resize trigger within Google Maps API?
The Google map info window will not appear when I click on a marker using the iphone. The same code works on the desktop on Android.
I need the map hidden by default and then loaded in only when the user clicks the view map button as I want to keep the weight of the page down as this is for a mobile site.
The click event handler is being fired as I put an alert on it and it worked. I think it might be something to do with the order of the code when I attacked the click handlers, but thats a guess. Also, when I add draggable: true to the markers the bubble appears but I dont want the markers to be draggable.
I have set up a test page http://www.clawg.co.uk/nearby/testmap.html
A run through of this is:
I scan the DOM for data attributes values which I use to create an array of data that will be used for info windows.
I create a button on the fly that will make the map appear when clicked
When the button is clicked the map api is loaded in if its not already available
The map is then loaded
The markers are positioned on the map
The default marker icons are too small for iphone 4 making them unclickable, so I used a custom marker that was 42x42 in size.
Any ideas on how to bind a click event to an OverlayView in v3 of the GMaps API? The overlays seem to be buried under the map's panes so clicking on the overlay results in just a zoom. I'd ultimately like to bind an infowindow to the overlay but just being able to click it would be a fine start.
Would just changing the z-index be the way to go? I tried this for a little while but couldn't get through all of the nested divs loaded by the map.
This is the demo I'm playing with: dutrack.com/markerShapes.php.
Edit: The overlays on the demo map are the large 'teardrop' icons and the paths. The smaller blue icons are Markers at the moment.
Consider placing your overlays in a different pane so that their z-Index is higher than. According to the documentation, getPanes().floatPane will get you the pane which is above all other map panes.
Also give your overlays a high z-Index so that they appear above other content in this frame.
Then use google.maps.event.addDomListener(..) to attach a click listener to your custom overlay.