schatteleyn/osm_test.html

## osm_test.html
<!DOCTYPE HTML>
<html>
  <head>
    <title>OpenLayers Test</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="osm_test.js"></script>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
</html>

## osm_test.js
var Locations = [
  {
    id: 1,
    name: "Église Notre-Dame de Bon-Port",
    lat: 47.21017384214512,
    lon: -1.568786203060425,
  },
  {
    id: 2,
    name: "Le Ferry",
    lat: 47.2093359999997,
    lon: -1.5670105999999997,
  },
    {
    id: 3,
    name: "Le Progrès",
    lat: 47.20682924409052,
    lon: -1.563695311546096,
  }
];

function init() {

    this.convert = function(lat1, lon1, lat2, lon2){
        var R = 6378.137; // Radius of earth in KM
        var dLat = (lat2 - lat1) * Math.PI / 180;
        var dLon = (lon2 - lon1) * Math.PI / 180;
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        return d * 1000; // meters
    };

    this.addMarker = function(position) {
        var markers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(position));
     };

    this.findLocations = function(latitude, longitude, fromProjection, toProjection) {
        for (i in Locations) {
          long = Locations[i].lon;
          lat = Locations[i].lat;

          if (convert(latitude,longitude,lat,long) <= 300) {
            var positionLocation = new OpenLayers.LonLat(long,lat).transform(fromProjection, toProjection);
            addMarker(positionLocation);
          } else {continue;}
        }
    };

    this.getPosition = function(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

        var position = new OpenLayers.LonLat(longitude,latitude).transform(fromProjection, toProjection);
        var zoom = 18; //maximum value

        addMarker(position);
        map.setCenter(position, zoom);
        findLocations(latitude, longitude, fromProjection, toProjection);
    };

    this.map = new OpenLayers.Map("basicMap");

    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();

    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(getPosition);
    }
}
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>OpenLayers Test</title>
	<style type="text/css">
	html, body, #basicMap {
	width: 100%;
	height: 100%;
	margin: 0;
	}
	</style>
	<script src="osm_test.js"></script>
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	</head>
	<body onload="init();">
	<div id="basicMap"></div>
	</body>
	</html>
	var Locations = [
	{
	id: 1,
	name: "Église Notre-Dame de Bon-Port",
	lat: 47.21017384214512,
	lon: -1.568786203060425,
	},
	{
	id: 2,
	name: "Le Ferry",
	lat: 47.2093359999997,
	lon: -1.5670105999999997,
	},
	{
	id: 3,
	name: "Le Progrès",
	lat: 47.20682924409052,
	lon: -1.563695311546096,
	}
	];

	function init() {

	this.convert = function(lat1, lon1, lat2, lon2){
	var R = 6378.137; // Radius of earth in KM
	var dLat = (lat2 - lat1) * Math.PI / 180;
	var dLon = (lon2 - lon1) * Math.PI / 180;
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
	Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
	Math.sin(dLon/2) * Math.sin(dLon/2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	var d = R * c;
	return d * 1000; // meters
	};

	this.addMarker = function(position) {
	var markers = new OpenLayers.Layer.Markers("Markers");
	map.addLayer(markers);
	markers.addMarker(new OpenLayers.Marker(position));
	};

	this.findLocations = function(latitude, longitude, fromProjection, toProjection) {
	for (i in Locations) {
	long = Locations[i].lon;
	lat = Locations[i].lat;

	if (convert(latitude,longitude,lat,long) <= 300) {
	var positionLocation = new OpenLayers.LonLat(long,lat).transform(fromProjection, toProjection);
	addMarker(positionLocation);
	} else {continue;}
	}
	};

	this.getPosition = function(position){
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
	var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

	var position = new OpenLayers.LonLat(longitude,latitude).transform(fromProjection, toProjection);
	var zoom = 18; //maximum value

	addMarker(position);
	map.setCenter(position, zoom);
	findLocations(latitude, longitude, fromProjection, toProjection);
	};

	this.map = new OpenLayers.Map("basicMap");

	map.addLayer(new OpenLayers.Layer.OSM());
	map.zoomToMaxExtent();

	if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(getPosition);
	}
	}