block by nitaku 90a09aab2a4fddb0436b

OpeNER - accommodations in Elba (jQuery+GMaps)

Full Screen

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.

index.js

// 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
      }
    });
  }
});

index.html

<!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="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//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>

index.css

body {
    background: #272822;
    margin: 0;
    padding: 0;
}
svg {
    background: white;
}