Detect waypoint click on DirectionsRenderer marker in Google Maps v3 - javascript

In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).

Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.
It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.

Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:
convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point
I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.

Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.
Create the single markers and assign the a high z-index
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(1.99, 2.99),
});
marker.setZIndex(999);
Add a listener to the markers
google.maps.event.addListener(marker, 'click', function(event){
alert(marker.title);
});
And now create the waypoints.

Related

Bing Maps Drop pin button

I am unable to get a drop pin button working on my bing map. I'm able to get a regular push pin on the map (it is auto created in the center) but I'd like to be able to move around and push a button to drop it in the center.
Thanks for any help.
function dropPin() {
dropPushPin = new Microsoft.Maps.Pushpin(map.getCenter(), {
color: '#f00',
position: map.getCenter(),
map: map,
draggable: true
});
map.entities.push(dropPushPin);
}
<button onclick="dropPin()">Try it</button>
The code you have will add a pin to the center of the map. If you are looking to animate the pin dropping onto the map, the Bing Maps control doesn't support animations well. One option if you have the icon for the pushpin is to animate that to the center of the map div using CSS and when the animation ends, add a pushpin to the map using your current code.
Alternatively, take a look at Azure Maps Web SDK which supports animations and has a full animation library: https://github.com/Azure-Samples/azure-maps-animations/tree/main/
Here are some other resources on Azure Maps:
https://azure.microsoft.com/en-us/services/azure-maps/
https://learn.microsoft.com/en-us/azure/azure-maps/

Move/Displace Marker Coords for showing extra information on Marker

I have a few Makers into my Map using Google Maps API v3. They are located by a LAT and LONG coords, and show default marker (A, B, C).
But now I want to show for each marker another marker displaced (or moved) a few pixels from default maker,
like this image:
The square must be a small div coloured.
How I must write the new Marker?
Markers cannot be created from DOM-elements(e.g. div's).
You must create a custom overlay
MarkerWithLabel should be a good choice to achieve it.

Cannot add a standard map marker to a google map with heatmap layer

I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?
You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/

Circle creates on previous coordinate on google map api

I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?
Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.
Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});

Hand cursor on mouseover KMLLayer in Google Maps

is it possible to show hand cursor on mouseover KMLLayer in Google Maps 3?
I see the two solutions (but it seems that they cannot be used):
handle mouseover event for KMLLayer and change cursor in CSS
handle mouseover event for Map and check if cursor's location is contained by KMLLayer
Do you have any other ideas?
Thanks
The kml polygon cannot have a mouseover event so 1. is not possible.
As for second i really don't see an easy way out.
If you could change the format of the data to something else than kml things would be way better.
You can't have mouseover event, but you can set a click listener onto the layer, which will show the hand cursor.
var layer = new google.maps.KmlLayer('http://...');
google.maps.event.addListenerOnce(layer, 'click', function () {
// do nothing here
});
Now whenever you mouse over an area defined in the KML it will show the cursor. You can also obtain the location of the mouse (if the user clicks on the KML Layer) because that will generate a KmlMouseEvent which will contain the LatLng of the point they clicked. It will also tell you information about which KML Placemark they clicked. You can then do your calculations here to see if it's contained by the KML Layer you want...
From what I know you can enable/disable cursor pointer in google maps v3 over kml by the option clickable:
var kml = new google.maps.KmlLayer(
kmlUrl,
{
suppressInfoWindows: true,
preserveViewport: true,
map: null,
clickable: false
}
);

Categories