Atoka API: aziende su mappa

by margonar

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<p>
  Inserisci il tuo token della API di <a href='https://atoka.io'>atoka.io</a>, un codice ateco, e clicca col destro sulla mappa per vedere le prime 30 aziende nei dintorni.
</p>

<form>
  <label>Token <input id='token' value='' /></label>
  <label>Ateco <input id='ateco' value='' /></label>
</form>
<br /><br />

<div id='map'></div>

CSS

label {
  display: block;
}

.suggerimento {
  border-bottom: 1px solid #666;
  padding: 2px 5px;
}

.suggerimento:hover {
  cursor: pointer;
  background-color: #666;
  color: white;
}

#map {
  height: 400px;
}

JavaScript

setupMap();

function setupMap() {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(42.607201, 12.846364),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  google.maps.event.addListener(map, 'rightclick', function(event) {
    cercaAziende(event.latLng.lat(), event.latLng.lng());
  });
}

function cercaAziende(lat, lon) {
  let token = $('#token').val(),
    ateco = $('#ateco').val(),
    url = 'https://api.atoka.io/v2/locations';

  $.get(url, {
    token: token,
    companyAteco: ateco,
    lat: lat,
    lon: lon,
    distance: 1000,
    packages: 'base',
    limit: 30,
  }).done(mostraAziende);
}

function mostraAziende(data) {
  let coords = data.items.filter(function(item) {
    return 'lat' in item.base.address;
  }).map(function(item) {
    let address = item.base.address;
    return {
      lat: address.lat,
      lon: address.lon
    };
  });
  inizializzaMappa(coords);
}

function inizializzaMappa(coords) {
  let map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(coords[0].lat, coords[0].lon),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (let i = coords.length; i--;) {
    let marker = new google.maps.Marker({
      position: new google.maps.LatLng(coords[i].lat, coords[i].lon),
      map: map,
    });
  }
}