I am using Google maps SDK for iOS. My question is two parts:
1) I have multiple markers on my map. But I want them displayed as dot and when tapped a marker needs to be place. Like the default behavior of Google maps iOS
2) How do I bring a sliding drawer on the bottom when tapped on the marker? I understand the I must use didMarkerTapped by delegating 'GMSMapViewDelegate' but are there any libraries for sliding views from the bottom?
You can try the below approach:
1, Initially add all the markers with an icon image same as the small dot you require. Then when a marker is tapped, in didTapMarker you can add a new marker at the tapped position with an icon set to the default marker icon you have shown. Keep the refernce to this marker so that you can remove it when user taps on the map again.
2, For implementing a sliding menu from the bottom, you can try using FTUtils . Please find an earlier post on the same
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!
I am trying to make a Polyline editor, just like the one from Google Drawings Library. (for specific reasons, i can't use that one)
It works on the same principle. Start with a point, then for each click add new points and make the polyline.
On the editor from Google Drawings Library, while you are editing a polyline, you're mouse can't interact with other items from the map.
Inspecting with firebug, i see that they have an overlay of 20000000 z-index inside the map.
Is there any way of creating the same overlay for my map using default Google Maps functions?
It's a custom overlay inside the overlayMouseTarget-pane with the same size as the map and a draw-method that updates the position of the overlay. You may do the same.
Please note that this is different from infowindow, which you can put any html code, but it is only activated when you click on the marker.
I know you can have different marker icons, but how does the shadowing (bubble chat) and the custom number appear? Like this:
(source: apple.com)
You could implement a custom overlay to use whatever HTML and CSS you want as a "marker".
https://developers.google.com/maps/documentation/javascript/customoverlays
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.