I'm using Google Map API to display my route. I have an array of way points. Because I need to use optimizeWaypoints, so all stopover of all markers have to be set to true. By doing that, Google Map automatically creates a marker at each way point, with click event to show info window.
My question is, how can I customize those auto generated markers? For example, if I want to change the content of those info windows, what should I do?
Thanks a lot for your help :)
There is no implemented option to customize these markers.
The content of the infoWindow may be modified by using a custom infoWindow(via the infoWindow-option of the DirectionsRenderer ), listen to the domready-event of the InfoWindow and modify the content....but this InfoWindow will also be used by the origin/destination-markers, there is no way to differentiate these markers from waypoint-markers.
The best you can do is to use the suppressMarkers-option to hide the automatically generated markers, and create the markers on your own based on the DirectionsResult.
Related
I'm looking for a way to use a custom UIView (not just a custom image) instead of default marker provided by Google Maps iOS SDK. Basically I need a possibility to place my UIView agains proper coordinates of the map, so not necessarily to use markers as they are, just any suitable solution. Any ideas?
There is not currently a way to do this. You can view the relevent feature request (and star it, to show interest) here: https://code.google.com/p/gmaps-api-issues/issues/detail?id=5203
The marker only shows an image. So it cannot take a CustomView. Moreover, if your custom view has some sort of button on it there is no way you can track the events from those button.
In simple words the map renders the markers as UIImage.
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
Is is possible to add a business location marker WITH IT'S "DEFAULT" INFOWINDOW bubble like the ones in maps.google.com?
I'm making a contact page for a a company, where I have the GMaps element with a location and a marker, naturally.
Example:
Go to maps.google.com and search for "Colosseum" (for example, any "known" location/business will do). When you click the Colosseum marker, you get an infoWindow that has the business/sight/whatever info in the window (screenshot: https://dl.dropbox.com/u/1122582/colosseum.jpg)
What I want to see, is:
When I click the marker on my map on my webpage, it will open the same style (or atleast very similar) infoWindow as in the example (this means logo, address, direction links etc. whatever it has). InfoWindow being provided by the API options, and not handmade by me.
In pseudocode, I would imagine seeing it like this:
myMarker.onClick({
position: myBusinessLocation,
useDefaultInfoWindow: true
map: myMap
});
Worth noting that since coordinates are actually just coordinates and named locations, I would need to make the API understand the Marker points to a business, and not just a point in the map.
Requirements
Client-side API usage
WITHOUT the use of Google's IFRAME embedding
WITHOUT making a custom infoWindow that just looks like the one in the example. The whole point is that I would use the "default" infoWindow (if GMaps API even provides one)
There is no built-in method to create such an infoWindow with the desired content automatically.
That's the nature of an API, it has to offer the ability to create an application, but must not create an application automatically.
You have to create the infoWindow on your own by using e.g. the implemented infoWindow-object.
The contents of the infoWindow you also must collect on your own, you may retrieve the details for a place by using a Place-Details-Request
I am making an application with google maps.
When markers are overlapping only the last one is displayed even if the icons are different..
I do not want it to cluster in that case, rather it should show both maybe by changing the coordinates just a but??
Any solutions??
I think this is a pretty elegant solution, called Spiderfying the markers.
https://github.com/jawj/OverlappingMarkerSpiderfier
I'm thinking of using it.
What I do now is use JavaScript to make a fancy popup that hides and shows divs on one marker location (created problematically in PHP, but you could do it on JS too). It has the side benefit of allowing less markers on the map.
Click a black numbered marker on this map to see it in action.
http://www.yourmapper.com/map/111/crime-reports/crime-in-metro-louisville-ky-since-jan-2003.htm
Another option is to use Google Maps API 3 Utility Library, it has a Marker Clusterer.
I am using the Google Maps API to code a campus map for my university. On the main map, when it is being viewed in the "Map" maptype, there is a custom overlay of the campus, which is set (by using GEvent.addDomListener) to be removed when the map is viewed in Satellite or Hybrid mode. When the user gets directions, through my map, to and from the campus, a polyline and 2 markers show up, like normal. When the marker is clicked, a small popup map is display, focused on the area of campus around that particular marker.
I was wondering if anyone knew of a way to set attributes of these mini-popup-maps. I need to extend the event listener to make sure that the overlay gets taken off when the mini map is clicked out of "Map" mode. I also need to be able to set the zoom level for these maps.
Any ideas?
(code can be provided as needed, wasn't really sure what parts would be needed and didn't want to post the whole f'n thing up here.)
Doesn't look like there are any built in options to modify the infoWindow you get from the GDirection markers, but you can explicitly replace the markers once you get them back.
This post describes the process.