The only way to identify which marker that have been tapped is to use the label. This is not ideal since many markers can have the same label. It would be nice to be able to get an id or object, and longtitude/latitude returned.
It would also be nice to be able to disable the label from showing.
+1. For now the only way to hide the label is modify the Fuse.Maps package manually.
Hi, Can you share some relevant code? Are you getting the data context for the marker? If so, you can add more data to each data item to distinguish them in the callback.
Thank you Anders, here is my code. As you can see the only way to get a marker is by using its tag.
<Panel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var stores = Observable();
function getStores() {
// Getting stores based on user location p.e.
var apiExample = [{
"id": 39,
"name": "ENGINEERS GYM",
"description": "Enginers Gym, transformaciones radicales en 8 semanas",
"profile_image": "http://mydomain,comdynamic/branches/engineers-gym/profile-image-39.png",
"cover_image": "http://mydomain,comdynamic/branches/engineers-gym/cover-image-39.jpg",
"category_image": "http://mydomain,comimg/categories/gimnasios.png",
"geo_lat": 22.169948,
"geo_lng": -101.0049216,
"rating": 0,
"schedule": [
""
],
"web": "http://www.engineersgym.com/",
"facebook": "",
"twitter": "",
"instagram": "",
"followed": 0,
"is_follow": "false",
"distance": 1390
}, {
"id": 4,
"name": "Cycling Shop",
"description": "La mas destacada tienda de ciclismo, con venta de repuestos y refacciones",
"profile_image": "http://mydomain,com/img/stores/rueda-libre.jpg",
"cover_image": "http://mydomain,com/img/stores/rueda-libre-bk.jpg",
"category_image": "http://mydomain,com/img/categories/tiendas.png",
"geo_lat": 22.156017,
"geo_lng": -101.003913,
"rating": 0,
"schedule": [
""
],
"web": "",
"facebook": "",
"twitter": "",
"instagram": "",
"followed": 9,
"is_follow": "false",
"distance": 2256,
"web": "http://www.bikecheckstudio.com/",
"facebook": "",
"twitter": "",
"instagram": "",
"followed": 2,
"is_follow": "false",
"distance": 2720
}, {
"id": 57,
"name": "Samba Smoothie",
"description": "¡Productos naturales, nutritivos y especialmente balanceados para tus actividades diarias!",
"profile_image": "http://mydomain.com/dynamic/branches/samba-smoothie/profile-image-57.jpg",
"cover_image": "http://mydomain.com/dynamic/branches/samba-smoothie/cover-image-57.jpg",
"category_image": "http://mydomain.com/img/categories/restaurantes.png",
"geo_lat": 22.1478936,
"geo_lng": -101.0260151,
"rating": 0
}];
for(s of apiExample) {
stores.add(s);
}
}
getStores();
/**
**/
function openStore(args) {
var len = args.data.stores._values.length;
console.log(JSON.stringify(args))
for(var i = 0; i < len; i++) {
if(args.data.stores._values[i].name == args.label) {
router.push("storeDetails", {id : args.data.stores._values[i].id});
return;
}
}
}
module.exports = {
stores : stores,
openStore : openStore
};
</JavaScript>
<NativeViewHost>
<MapView Zoom="14" MarkerTapped="{openStore}" ShowMyLocation="true" ShowMyLocationButton="true">
<Each Items="{stores}">
<MapMarker Latitude="{geo_lat}" Longitude="{geo_lng}" Label="{name}" IconFile="../Assets/ic_marker.png" IconAnchorY="1" />
</Each>
</MapView>
</NativeViewHost>
</Panel>
The console.log outputs
{
"node": {
"external_object": {}
},
"data": {
"stores": {
"_origin": -70,
"_subscribers": [{
"version": 2,
"active": true
}],
"_isProxy": false,
"_values": [{
"id": 39,
"name": "ENGINEERS GYM",
"description": "Enginers Gym, transformaciones radicales en 8 semanas",
"profile_image": "http://mydomain.com/dynamic/branches/engineers-gym/profile-image-39.png",
"cover_image": "http://mydomain.com/dynamic/branches/engineers-gym/cover-image-39.jpg",
"category_image": "http://mydomain.com/img/categories/gimnasios.png",
"geo_lat": 22.169948,
"geo_lng": -101.0049216,
"rating": 0,
"schedule": [""],
"web": "http://www.engineersgym.com/",
"facebook": "",
"twitter": "",
"instagram": "",
"followed": 0,
"is_follow": "false",
"distance": 1390
}, {
"id": 4,
"name": "Cycling Shop",
"description": "La mas destacada tienda de ciclismo, con venta de repuestos y refacciones",
"profile_image": "http://mydomain,com/img/stores/rueda-libre.jpg",
"cover_image": "http://mydomain,com/img/stores/rueda-libre-bk.jpg",
"category_image": "http://mydomain,comimg/categories/tiendas.png",
"geo_lat": 22.156017,
"geo_lng": -101.003913,
"rating": 0,
"schedule": [""],
"web": "http://www.bikecheckstudio.com/",
"facebook": "",
"twitter": "",
"instagram": "",
"followed": 2,
"is_follow": "false",
"distance": 2720
}, {
"id": 57,
"name": "Samba Smoothie",
"description": "¡Productos naturales, nutritivos y especialmente balanceados para tus actividades diarias!",
"profile_image": "http://mydomain.com/dynamic/branches/samba-smoothie/profile-image-57.jpg",
"cover_image": "http://mydomain.com/dynamic/branches/samba-smoothie/cover-image-57.jpg",
"category_image": "http://mydomain.com/img/categories/restaurantes.png",
"geo_lat": 22.1478936,
"geo_lng": -101.0260151,
"rating": 0
}],
"_beganSubscriptions": true
},
"user": {
"_origin": -10,
"_subscribers": [{
"version": 2,
"active": true
}],
"_isProxy": false,
"_values": [{
"id": 2,
"name": "Jess",
"image": "http://mydomain.com/dynamic/users/2/img-20161219-wa0072.jpg",
"cover_image": "http://mydomain.com/dynamic/users/2/img_20161215_123512.jpg",
"email": "aa",
"birthday": null,
"age": 0,
"phrase": "Odié cada minuto de entrenamiento, pero dije, “no abandones”. Sufre ahora y vive el resto de tu vida como un campeón.-Muhammad Ali",
"sports": [1]
}],
"_beganSubscriptions": true
},
"location": {
"_origin": -11,
"_subscribers": [{
"version": 2,
"active": true
}, {
"version": 2,
"active": true
}],
"_isProxy": false,
"_values": [{
"latitude": 22.1920997,
"longitude": -101.0269156,
"accuracy": 500,
"altitude": 0,
"speed": 0
}],
"_beganSubscriptions": true
}
},
"label": "ENGINEERS GYM",
// What I need to identify a tapped marker
"id": 4,
"latitude": 123.456,
"longitude": 123.456,
}
Yes, I understand now. I’m afraid this is a limitation of the current API. I’ve filed an internal ticket to enable a Tapped event directly on the MapMarker which would give you the entire data context of the marker. Thanks posting! This thread will be notified when the issue is fixed.
Nice!
<MapMarker Tapped="{myHandler}"/> is in the pipe Will be making it to a release as soon as possible.