An example that uses the OpeNER Tour-pedia APIs and Google Maps API to display all the accommodations in Isola d'Elba as a dot density map.
The Tour-pedia API is called by jQuery.
An example that uses the OpeNER Tour-pedia APIs and Google Maps API to display all the accommodations in Isola d'Elba as a dot density map.
The Tour-pedia API is called by jQuery.
body { | |
background: #272822; | |
margin: 0; | |
padding: 0; | |
} | |
svg { | |
background: white; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="OpeNER - accommodations in Elba (jQuery+GMaps)" /> | |
<title>OpeNER - accommodations in Elba (jQuery+GMaps)</title> | |
<link rel="stylesheet" href="index.css"> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
</head> | |
<body> | |
<div id="mapcanvas" style="height: 500px; width: 960px"></div> | |
<script src="index.js"></script> | |
</body> | |
</html> |
// Get data | |
var url = 'http://wafi.iit.cnr.it/openervm/api/getPlacesByArea?S=42.666&N=42.912&W=10&E=10.5&category=accommodation'; | |
$.getJSON(url, function(data) { | |
// Visualize | |
var center = new google.maps.LatLng(42.779152, 10.277379); | |
var myOptions = { | |
zoom: 9, | |
center: center | |
}; | |
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); | |
for(var i in data) { // noprotect | |
new google.maps.Marker({ | |
position: new google.maps.LatLng(data[i].lat, data[i].lng), | |
map: map, | |
title: data[i].name, | |
icon: { | |
path: google.maps.SymbolPath.CIRCLE, | |
fillColor: 'red', | |
fillOpacity: 1, | |
strokeWeight: 0, | |
scale: 3 | |
} | |
}); | |
} | |
}); | |