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);
});
Related
I'm using drawing. DrawingManager and I want to restrict drawing a polyline with more then 2 points,so basically it will be just a line. I can do it after the polyline is complete with the polylinecomplete event.
But i want to catch the event when it's adding a point to the path so i can jut turn off the polyline drawing mode. I have thought to catch it with click event but as it turns out
google.maps.Map events, such as click and mousemove are disabled while drawing on the map.
and i don't see any events like the one I need in documentation.
Is there a way to catch the event of adding a point to the polyline path or just click event?
I have a Google map that I am using to allow people to suggest locations. Currently I position a draggable marker in the centre of the map using a LatLng created with
myPosition = frmMap.getCenter();
What I would like to do though is place it initially somewhere to the edge of the map, perhaps directly under the zoom control (not unlike the way you see the yellow street view man above the zoom control).
I've searched for a solution but am not coming up with anything. My only idea was to do some maths based on the Center and NortEast but I'd rather have an absolute position based on pixels if that's possible?
As I mentioned in the comments, computing a latlng value for a marker to position under the zoom controls is not only cumbersome, but might not be feasible if the user starts panning/zooming around in the map (as the marker will move wherever the latlng takes it).
My suggestion would be to use the Drawing Library provided by the Maps API. This basically gives you a drawing control, to add markers to the map (other overlays are possible too: cirlce, polygon, polyline, rectangle). And like any control google maps provides, you can strictly position them anywhere you'd like - by setting it in the options. The snippet below describes how you initialize the drawing library:
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
drawingModes: [
google.maps.drawing.OverlayType.MARKER
]
}
});
drawingManager.setMap(map);
This gives you your drawing control, with the mode for Marker enabled, and binds it to your map object.
You can then listen to when a marker's been added by adding a listener on the drawingManager variable for the markercomplete event. Then in the call back you can get the position of the added marker, the snippet below demonstrates this:
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
var position = marker.getPosition();
});
I put together a small jsfiddle with this example if you'd like to see it in action. Also, click here for full reference of the Drawing Library for the maps api.
EDIT: (start mode in marker add on map load, hide drawing controls after marker added, maker marker draggable)
To start the drawing mode to add marker on map load, simply set the drawingMode option in your drawingManager variable declaration:
`drawingMode : google.maps.drawing.OverlayType.MARKER`
You can hide the drawing controls in the markercomplete event listener:
// To hide:
drawingManager.setOptions({
drawingControl: false //changes UI back to regular map interactions
});
drawingManager.setDrawingMode(null); //hides controls
Alternatively, if you're never going to need the drawing controls again later in your client interactions you can remove it from the map complete via:
drawingManager.setMap(null);
Then to make the marker draggable, just set the option in the listener as well (because the marker in the callback function is a google maps marker object anyway - which references the marker that's added to your map).
marker.setOptions({
draggable: true
});
You can then add a listener on the marker object for the dragend event to track changes to the location.
Here's in updated fiddle: http://jsfiddle.net/svigna/J5zMg/3/
I have a google map that uses a fusion table layer for dynamic styling of a large number of Polygons. On top of this layer, I'm also generating a set of markers at specific LatLng positions within the polygons themselves. I'm looking to have the following behavior:
When you click anywhere on a polygon, an infoWindow should pop up, populated by data from the fusion table. This is working.
When you click on a marker, it should pass the click event through to the fusion table layer and create the same popup as if a natural click occurred at the LatLng of the marker. This is what I'm struggling with, and isn't currently working. I'm adding a click listener to each marker, then using that to trigger a click on my fusion table layer, more or less as suggested here:
Here's the code I'm using to add a listener to each marker:
function addMarkerListener(city, LatLng){
google.maps.event.addListener(city, "click", function(e) {
google.maps.event.trigger(layer, 'click', {
latLng: LatLng
});
});
}
In this case, layer is my fusion table layer.
Using this, the click triggers, but I don't actually get any of the data from my fusion table (stored in the row variable of the mouse event object). Instead, my mouse event is passed directly though to my listener on the fusion table layer that would normally handle clicks.
How can I create a click event on the fusion table layer, programmatically, that will pull data from the fusion table as a natural click would?
This is an example of Fusion Table Layer that click markers from sidebar programmatically.
See the entire code from this page.
http://googlemaps.googlermania.com/google_maps_api_v3/en/fusion-tables-sidebar.html
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.
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.