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/
Related
I am using Bing map version 8, earlier with version 7 used entities, now we use layers and create a new layer and add pushpins to that layer and then add the layer to the map.
But, in a situation when an sea port icon is there and a pushpin emerges very close to it, it hides the icon and pushpin stands visible.I want both icon and pin to stay visible. Please help.
var pinLayer = new Microsoft.Maps.Layer();
//Created pins
pinLayer.add(pin); //added the pin to layer
//
map.layers.insert(pinLayer); //Added the layer to map
Earlier in v7 (using entities)-
Now in V8, the same icon of airport is not visible. I want it to show up.
Are you talking about the airport icon that is automatically added by Bing Maps? If so, this is to be expected as it is a map label which is lower priority than your data. Bing Maps uses vector labels and label collision to hide map labels which are overlapped by pushpins to keep the map view nice and clean. If you would prefer to disable the vector labels simply add the following map option when loading: liteMode: true
You can find out more about vector labels in Bing Maps V8 here: https://msdn.microsoft.com/en-us/library/mt750538.aspx
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.
I'm using Google Fusion Table API and Google Maps API. I have my maP thanks to Google Maps API, then I create a layer using Google Fusion Table API, works great.
When I create the layer I define that the markes should be "small_red" (the small red dots), thants works great too.
var layer = new google.maps.FusionTablesLayer({query: {select: 'coordenadas', from: '1-zmpFV_oI7OBiq3iEyHyze7QBiBDZzdrxby_TYM', where: 'hide!=0'},map: map, suppressInfoWindows: true, styles: [{ markerOptions: {iconName: "small_red" }}]});
Now, as you can see below, I want to change the icon to "large_red" (the Google Maps normal one) when the user zoom in, and back to "small_red" (again, the red dots) when the user zoom put.
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom()>14){
//Change icon to large_red
} else {
//Back to small_red
}
});
This last code recognize the zoom in or out event, then I have an if clause to verify if the zoom goes up or down, and then, the problem, I don't know how to change the icons from the markers on the layer over the map.
Thanks in advance for any help.
I found the solution, simple:
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom()>14){
layer.setOptions({styles: [{markerOptions:{ iconName:"large_red"}},]});
} else {
layer.setOptions({styles: [{markerOptions:{ iconName:"small_red"}},]});
}
});
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.
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
}
);