We Keep Coding

Bing Maps v8 - Invoke Click Event on PushPin

Once i load the Bing map with multiple pushpin with infobox. I have added click Here anchor tag on HTML with specific pushpin index to display infobox on javascript click event. Somehow it's not working for me.
I do see Invoke event is being supported in v8
Here is the fiddle https://jsfiddle.net/pakpatel/9dc4oxfk/2/
var map, infobox;
map = new Microsoft.Maps.Map('#myMap', {
credentials: ''
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create random locations in the map bounds.
var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());
for (var i = 0; i < randomLocations.length; i++) {
var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin ' + i,
description: 'Discription for pin' + i
};
//Add a click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
function showInfoboxByKey(Key) {
//Look up the pushpin by gridKey.
var selectedPin = map.entities.get(gridKey);
//Show an infobox for the cluster or pushpin.
Microsoft.Maps.Events.invoke(selectedPin, "click");
}
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
<a href='javascript:void(0);' onclick='showInfoboxByKey(3);'> Click Here </a>

The issue is you haven't passed in any event arguments when you invoked the event. As such the event handler doesn't get past your if statement and thus doesn't do anything. See the documentation here and you will notice that you need to provide the event arguments: https://msdn.microsoft.com/en-us/library/mt750279.aspx
That said, I'm not a fan of the approach being taken in your app here. If you simply want to get this working quick an easy, replace your invoke line of code with this:
pushpinClicked({e:{target: selectedPin }});
I highly recommend adding your pushpins to a layer and adding your click event to the layer. This greatly reduces the complexity of the event system and has a small performance boast.

MapBox pop-up descriptions on markers not showing when clicking

I've integrated a MapBox map with marker clustering. For some reason the descriptions/titles will not show when you click on the marker.
Any idea why this is happening or how to fix it?
The page: https://vpnarea.com/front/member/signuptest
My MapBox code:
<script>
L.mapbox.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxx';
var markers = L.markerClusterGroup();
$.getJSON("https://vpnarea.com/data2.geojson-copy", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.setIcon(L.mapbox.marker.icon({'marker-color': 'f5c200','marker-size': 'small'}));
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.mapbox.map('map1', 'vpnarea.m9b2pf4n') .setView([60, -55], 3);
markers.addTo(map);
});
</script>

You'll need to bind popups in order for them to appear: Mapbox.js's L.mapbox.featureLayer does this by default, but you're using L.geoJson, which does not. So you'll need to check out the Leaflet documentation for .bindPopup and use it.

How To Identify Leaflet's Marker during 'popupopen/'dblclick ' event?(_source not working)

I tried this following source code:
map.on('popupopen', function(e) {
var identifyMarker= e.popupopen._source;
});
I just referred some guides from other sources that _source can identify the marker.
But when I run this source code, there is an error which is came from "_source".
So is there any other ways to identify leaflet's marker? Is it _source is not compatible with current version?

As you see in the doc, Marker has a getPopup() while Popup does not have a getMarker()
When you bind the popup to a marker, you have to keep this information in the popup object.
var marker = L.marker([lat, lng]);
var popup = L.popup().setContent("blabla");
var popup.marker = marker;
marker.bindPopup(popup);
The you can get access to the marker in the popupopen event (note e.popup and NOT e.popupopen)
map.on('popupopen', function(e) {
var identifyMarker = e.popup.marker;
});

Leaflet marker draggable not working when function is called from a button

I am trying to create a function to be called by Button that drops a marker at the center of the mapView and allows it to be draggable until a button with id="doneMarkerbtn" has been clicked to disable dragging.
My following code was able to drop a marker at the center of the mapView. However, the marker is not draggable at all. Hope someone can look at my code and help me with this. Thanks.
Additional Info: This code is on a .js file which I import both at the <head> and <body> of my html. Import twice due to some other functions that requires it at different part of the html. Also note that this code is to be used for a Cordova/Phonegap app.
/* Draws marker on center of mapView and allow user to edit by dragging until done */
function drawMarker() {
//Extend the Default marker class
var PinMarker = L.Icon.Default.extend({
options: {
iconUrl: 'img/marker.png', //directory of pin image
iconSize: [26,40] //[width,height] of pin image in pixels
}
});
var pinMarker = new PinMarker();
var marker = L.marker(map.getCenter(), {icon: pinMarker, draggable: true}).addTo(map); //drop marker on center of mapView
marker.on('dragend', function (e) { //event activates at the end of a drag
var coords = e.target.getLatLng(); //gets new latlng of marker
var lat = coords.lat;
var lng = coords.lng;
var latlng = lat+","+lng;
marker.bindPopup(latlng).openPopup().update(); //popup showing dragend latlng
});
var stopDrawButton = document.getElementById('doneMarkerbtn'); //set #doneMarkerbtn as stopDrawButton
stopDrawButton.addEventListener('click', function(){ //when stopDrawButton clicked
marker.dragging.disable(); //disable dragging on marker
});
}

change google maps custom icon with zoom

I am trying to change my google map markers so that when the zoom is < 5 they change from their custom markers to a star image.
This is what I have so far (not working)
//zoom icons to stars at continent level
google.maps.event.addListener(busMap, 'zoom_changed', function() {
var markerIconStar = google.maps.MarkerImage("icons/star.png");
var currentZoom = busMap.getZoom();
if (currentZoom < 5){
markerSanFran.setIcon(markerIconStar);
markerLA.setIcon(markerIconStar);
markerHollywood.setIcon(markerIconStar);
markerSantaCruz.setIcon(markerIconStar);
markerSanDiego.setIcon(markerIconStar);
markerLasVegas.setIcon(markerIconStar);
markerGrandCan.setIcon(markerIconStar);
markerMamLakes.setIcon(markerIconStar);
markerYosemite.setIcon(markerIconStar);
}
});
http://screamingeagle.travel/map/map2.html is a where you can see the rest of the code in action currently

You are adding your zoom_changed listener to the map before the busMap is defined, so it doesn't ever fire. Add it to busMap where that is defined (in your loadBusMap function)
function loadBusMap() {
//The empty map variable ('busMap') was created above. The line below creates the map, assigning it to this variable. The line below also loads the map into the div with the id 'bus-map' (see code within the 'body' tags below), and applies the 'busMapOptions' (above) to configure this map.
busMap = new google.maps.Map(document.getElementById("bus-map"), busMapOptions);
directionsDisplay = new google.maps.DirectionsRenderer();
//Assigning the two map styles defined above to the map.
busMap.mapTypes.set('map_styles_bus', styled_bus);
busMap.mapTypes.set('map_styles_bus_zoomed', styled_bus_zoomed);
//Setting the one of the styles to display as default as the map loads.
busMap.setMapTypeId('map_styles_bus');
//Calls the function below to load up all the map markers and pop-up boxes.
loadMapMarkers();
google.maps.event.addListener(busMap, 'zoom_changed', function() {
var markerIconStar = google.maps.MarkerImage("icons/star.png");
var currentZoom = busMap.getZoom();
if (currentZoom < 5){
markerSanFran.setIcon(markerIconStar);
markerLA.setIcon(markerIconStar);
markerHollywood.setIcon(markerIconStar);
markerSantaCruz.setIcon(markerIconStar);
markerSanDiego.setIcon(markerIconStar);
markerLasVegas.setIcon(markerIconStar);
markerGrandCan.setIcon(markerIconStar);
markerMamLakes.setIcon(markerIconStar);
markerYosemite.setIcon(markerIconStar);
}
});
}