I'm making a website, where the visitor gets its position showed on a map and within a chosen radius (e.g. 10km) the visitor can see some POIs (e.g. Restaurants, Bars).
I have this code so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError);
}
else
{
alert("Geolocation not supported in this browser");
}
}
function processPosition(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
center: latlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
});
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
It shows me my position on a map with a marker using Google Maps.
The thing is, I would like to use the maps from OpenStreetMap (they are updated regularly and there are not restrictions), but unfortunately I haven't managed to implement it yet.
Here are the maps I need: Maps
1. Is there an example (tutorial), which shows how to use their API, like Google's?
2. Does OpenStreetMap has something like POIs, like Google Places? Or is it even possible to use Google Places together with the maps of OpenStreetMap?
I'm making a website, where the visitor gets its position showed on a map and within a chosen radius (e.g. 10km) the visitor can see some POIs (e.g. Restaurants, Bars).
I have this code so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis./maps/api/js?key=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError);
}
else
{
alert("Geolocation not supported in this browser");
}
}
function processPosition(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
center: latlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
});
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
It shows me my position on a map with a marker using Google Maps.
The thing is, I would like to use the maps from OpenStreetMap (they are updated regularly and there are not restrictions), but unfortunately I haven't managed to implement it yet.
Here are the maps I need: Maps
1. Is there an example (tutorial), which shows how to use their API, like Google's?
2. Does OpenStreetMap has something like POIs, like Google Places? Or is it even possible to use Google Places together with the maps of OpenStreetMap?
2 Answers
Reset to default 3If you want to use OpenStreetMap data, you should look into OpenLayers. This works a little bit differently than the Google Maps or Bing Maps APIs: you have to install the OpenLayers JavaScript library on your server, and it takes care of displaying the map data ("map tiles") which can e from various sources: OpenStreetMap (OSM), Google Maps, your own custom map data, etc. The OpenStreetMap website itself uses OpenLayers to display the maps.
1: There is documentation (although I'm afraid not quite as good as for the Google Maps API) and plenty of examples, including some for using OpenStreetMap data, alone or together with Google data (enter "osm" in the "filter" box at the top).
2: As for POIs, you can place a "Marker Layer" on the map as in this example, including customizable marker icons and bubbles which appear when clicking on the icons, but you'll have to take care of the data for the POIs and the search functions yourself. So, if you want, you are free to use the Google Places API and then display the results as markers on an OpenStreetMap - as long as you display a "Powered by Google" logo.
The list of all OSM frameworks available from openstreetmap, with particular notice on the list of so called "webmaps", as it pertains to your question: http://wiki.openstreetmap/wiki/Frameworks#Webmaps
nJoy!