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.
Related
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.
I am working with Google Maps API V3. The googlemaps displays markers for some places/location by default, I need to capture the click event when one of them is clicked..
I have tried to use the click event of the map but it not works because the user is clicking the marker not the map, code is given:
google.maps.event.addListener(mymap, 'click', function () {
alert('clicked');
});
Can someone give me an idea how to do it?
EDIT:
I can find no suitable Event in the available Events, which can help me!
Please note that I am not talking about the custom Markers (Created by User), these are default markers, googlemaps displays them by default.
Here's a clean solution straight from Google:
https://developers.google.com/maps/documentation/javascript/examples/event-poi
You can easily customize the default infowindow for POI's. Just ignore the route-making feature of the tutorial.
I have never tried it but could you retrieve the list of places that Google has displayed using the Google Places API and then establish your own pins and click events for them?
It's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using
Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI.
Note that the OP is asking about doing this using the GMAP3 library, which is a jQuery plugin library that adds an API layer on top of the Google Maps layer. it is absolutely correct to say that the Google API is to use google.maps.addListener, but I think that the OP wants something that's closer to the GMAP3 example using addMarkers, but listening to the click event. With that in mind, I modified the example from GMAP3 and changed the mouseenter event to the click event and got rid of the mouseleave event.
Refer
Hi~ I have about 200 markers on my map.
I want to make them dropping one by one when the page is loaded, i.e. adding a small delay/interval to each marker's dropping animation.
I tried to archive it by using jQuery's wait()delay() and JS's setTimeout() methods, but the animation seems to be triggered by the creation of the Marker instances, while those methods only working with methods calls. (eg: setTimeout(function(), 1000); )So I could get none of them working.
Can anyone please provide a simple solution for this problem? Thanks in advance!
Quick suggestion:
Create your markers but don't set them on a map. Add them to an array. When you're done creating the array, pop the first one and drop it on the map. Set an animation_changed event on the marker. When the marker stops dropping it will change it's animation to null. In the event, test what the animation is, and if it null, pop the next marker off and repeat.
I have a map with about hundred location points (markers). Which are grouped with ClusterMarker http://googlemapsapi.martinpearman.co.uk/clustermarker
And then there's one "main" marker, which is draggable.
If main marker location is overlapping with other marker then it becomes undraggable. Or in another words: clicking takes action on marker which is behind the main marker.
Weird, because I'm setting zIndexProcess when creating the main marker, which brings it to the front of others (by default it's not like that).
So.. I don't know what's the problem and how to ask but I would try like this: How to get clickable area to the front if I have brought to the front main marker icon already? (at least it is visible on top of others)
P.S. I have GPolygon drawn on the base of main marker (radius, a circle) and this circle is drawn behind all markers. Don't know if this is relevant. Oh, and I can't bring this polygon to the front (seems like zIndexProcess does not work on this)
I had a similar situation and what you can do is pass the event through to another object. In my example here if the condition is met then I pass the event (by triggering it) on the map itself. You could do a similar check to see if the event point is inside a visible polygon (I won't put that code here as it should be relatively easily doable) and pass the click event onto the polygon.
Here is the code (lightly modified) that I use:
google.maps.event.addListener(this.intLineObj ,"click", function(latlng) {
if (<condition>)
{
//pass the event down to the map
google.maps.event.trigger(map, "click", latlng);
} else {
//do stuff
}
});
I hope that helps.
In version 2 of the API the map click event returned an Overlay, LatLng, Overlaylatlng.
I used this to create a generic map event that would either retrieve the coordinates of the Map click event, or return the coordinates of a Marker or other type of Overlay.
Now that API v3 doesn't return the Overlay or Overlaylatlng during the map click event, how can I go about creating a generic "click" event for the map that works if the user clicks on a marker or overlay? I really don't want to create a click event for each marker I have on my page as I am creating anywhere from a handful to a couple thousand markers.
Also, I had to create a custom ImageMapType in order to display the StreetViewOverlay like we could do in v2 of the API because I couldn't find anywhere that told me how to add the StreetViewOverlay without the pegman icon. How can I go about retrieving the LatLng coordinates of a click on this overlay type as well?
You will need to add a click listener to each overlay you add. You can do this in a createMarker function to reduce your code overhead.
Clicks on markers do not trigger a click event on the map at all.