×
Namespaces

Variants
Actions
Revision as of 17:11, 13 November 2011 by Maveric (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HERE Maps API - How to find the nearest Marker

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to find the nearest Marker on the map.

Introduction

Summary

Example code

<html><head><title>Nokia Maps API - Find the nearest Marker example</title>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.0.0/jsl.js"></script>
</head>
<body>
<center><div id="map" style="z-index: -1; left:1px; top:100px; width:640px; height:480px;></div></center>
<div style="
z-index: -1; left:40px; top:450px; width: 800px; position: absolute;">
<p>Click anywhere on the Map to find out which of the five Markers is the nearest to that spot.</p>
<p>You can also drag and drop any Marker to a new position.
<p>The nearest marker is: <span id="
nearestMarker">*None*</span><br></div>
<script type="
text/javascript">
 
var nearestMarker = document.getElementById("
nearestMarker");
 
var map = new nokia.maps.map.Display(document.getElementById("
map"),
{components: [ new nokia.maps.map.component.Behavior() ]});
 
map.setCenter([60.1697768639186, 24.82923586371288]);
map.setZoomLevel(16);
map.set("
baseMapType", map.SATELLITE);
 
var marker1 = new nokia.maps.map.StandardMarker([60.1697768639186, 24.82923586371288],
{
text: "
Marker 1",
draggable: true,
});
var marker2 = new nokia.maps.map.StandardMarker([60.170497332447866, 24.828592133548653 ],
{
text: "
Marker 2",
draggable: true,
});
var marker3 = new nokia.maps.map.StandardMarker([60.17093227431904, 24.827707004572943 ],
{
text: "
Marker 3",
draggable: true,
});
 
var marker4 = new nokia.maps.map.StandardMarker([60.170057048001865, 24.826505374933163 ],
{
text: "
Marker 4",
draggable: true,
});
 
var marker5 = new nokia.maps.map.StandardMarker([60.170025027084705, 24.82839365008141],
{
text: "
Marker 5",
draggable: true,
});
 
map.objects.add(marker1);
map.objects.add(marker2);
map.objects.add(marker3);
map.objects.add(marker4);
map.objects.add(marker5);
 
var eventTarget = nokia.maps.dom.EventTarget;
var eventCheck = document.getElementById("
map");
eventTarget(eventCheck);
eventCheck.addListener("
click", function(evt)
{ var coords = map.pixelToGeo(evt.targetX , evt.targetY);
findNearestMarker (coords);
}, false);
 
function findNearestMarker(coords) {
var minDist = 1000;
var nearest_text = "
*None*";
for (i=0; i< map.objects.getLength(); i++)
{
if ( map.objects.get(i) instanceof nokia.maps.map.StandardMarker ) {
var markerDist = map.objects.get(i).coordinate.distance(coords);
if (markerDist < minDist) {
minDist = markerDist;
nearest_text = map.objects.get(i).text
}
}
}
 
nearestMarker.innerHTML = nearest_text;
}
</script>
</body>
</html>


Add categories below. Remove Category:Draft when the page is complete or near complete

271 page views in the last 30 days.