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.
Related
I've implemented a click event on the map using
google.maps.event.addListener(map, 'click', mapclick);
and everything is working fine.
I've also added a geojson layer on map. So, the problem is when I click on the overlay geojson layer (which is a polygon layer actually), the map click event not fired. Hence, my question is what should I do so that map click event also work when I click on an overlay layer on map?
It's not clear what you mean by "geojson layer" , but when you mean a Data-layer there are 2 options:
when you don't need the click-event to be triggered for the feature(e.g. polygon)
set the clickable-option of the layer to false:
map.data.setStyle({clickable:false});
when the click-event should be triggered for both, map and feature
trigger the event for the map programmatically:
map.data.addListener('click',function(e){
google.maps.event.trigger(this.getMap(),'click',e);
});
I'd like to use a custom marker image instead of the pulsing blue dot - is there a way to customize this in react native maps using apple maps for ios and google maps for Android?
As far as I know, you cannot change the default current location dot. A work around is to pass the user's location into a <Marker /> with your custom image and turn off showsUserLocation to hide the default blue dot. Here are the Marker docs.
Then you can track the user's location using Geolocation.watchPosition. If you set the user's location to state it will trigger a rerender when the user moves.
You can create a custom marker and hook up an event listener to track the user and update the location of the marker as your user moves.
This event listener is available within the framework.
https://facebook.github.io/react-native/docs/geolocation.html#watchposition
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.
I want to bind a Clickevent to Markers of a GMap, which are already there when the page is loaded. So I dont want to create new Markers, i only want to bind a Click Event to existing Markers.
The Map and the Markers are already placed and now i want to do some jQuery Stuff when the user is clicking on a Marker of the map.
I only have found solutions how to create new Markers and so on. Im working with the API v3.
I wonder is there a way to automatically pop up the infoWindow of a marker provided a coordinate. I want to click a link on the page from which I will get a geolocation, (and this location has already been marked on the map) With this coordinate, the corresponding infoWindow will pop up just like I clicked it on the map. Does anyone have a clue how to do that?
Thanks.
--
Generally, it's like what you can do with Google Maps, if you have multiple locations on the left, you click one, the corresponding marker on the map will pop up an infoWindow.
It's possible, all you need is a reference to the related marker, then you may trigger a click on the marker, and the infoWindow will open.
How to get the reference to the marker depends on your application(the way you create the markers and the links)