maps

index.html

#map

maps.markdown

maps

A Pen by Thibaut Nguyen on CodePen.

License.

script.js

let houses = {"sept bonniers":{"houseNumbers":"5, 12, 14,16, 18, 20, 22, 24, 28, 32, 34, 36, 37, 38, 40, 42, 48, 46, 47, 50, 51, 53, 57, 60, 62"},"Adolphe Demeur":{"houseNumbers":"9,15"},"Albanie":{"houseNumbers":"72"},"Alexandre Bertrand":{"houseNumbers":"9,15,13,18"},"Alphonse Asselbergs":{"houseNumbers":"38, 29, 25, 17, 15, 13, 10, 22"},"Alsemberg":{"houseNumbers":"651, 615, 613, 607, 605, 603, 601, 597, 547, 442"},"Antoine Bréart":{"houseNumbers":"27,32,31,33"},"Armures":{"houseNumbers":"9, 13, 15, 17, 12, 18, 19, 21, 23, 25, 26, 74, 90, 92, 94"},"Arthur Diderich":{"houseNumbers":"15,13,9,11,7,16"},"Beekman":{"houseNumbers":"9,11,12,18,19,23,25,48,50,61,105"},"Boetendael":{"houseNumbers":"92, 94, 95, 122, 123, 124, 139, 142, 144, 146, 149, 150, 152,153"},"Bourgogne":{"houseNumbers":"27, 31"},"Carmélite:":{"houseNumbers":"55, 57, 58, 59, 78, 60, 80, 82, 84,85,87,89,91,101,105,108,110,112,114,116,125,133,135,137,141"},"Carré Cassimans":{"houseNumbers":"1,2"},"Carré Fossé Gracht":{"houseNumbers":"1, 4, 9, 13"},"Cervantes":{"houseNumbers":"70,89,91,87"},"charme":{"houseNumbers":"16, 27, 29, 51, 57"},"Chaussée de Bruxelles (Forest):":{"houseNumbers":"275, 282, 284, 291, 291B, 378, 330, 352, 390,"},"Cottages":{"houseNumbers":"19, 27, 31, 47, 79, 94"},"Doyenné":{"houseNumbers":"26,28,36,84,86"},"Escrime":{"houseNumbers":"18, 20, 21, 22, 28, 31, 35, 36, 40, 49"},"Evrard":{"houseNumbers":"23,29,35,37 ,20,39"},"Fidèles":{"houseNumbers":"7,13,17,21,25,27"},"Glaieuls:":{"houseNumbers":"20, 38, 43, 54"},"glands":{"houseNumbers":"62, 64, 66, 81"},"Henri Maubel":{"houseNumbers":"10, 31, 37, 83, 97, 101"},"Jef Lambeaux":{"houseNumbers":"31,34,11"},"Joseph Bens":{"houseNumbers":"5,7,9"},"Jupiter":{"houseNumbers":"49, 103"},"Lombardie":{"houseNumbers":"32,36,53"},"Loncin":{"houseNumbers":"11"},"Marconi:":{"houseNumbers":"47, 49, 53, 67, 69, 73, 75, 77, 79, 81, 99, 109, 111, 113, 115, 116, 117, 120, 121, 122"},"Maréchal Joffre":{"houseNumbers":"124"},"melon":{"houseNumbers":"22"},"Meyerbeer":{"houseNumbers":"18, 46, 89"},"Mont Kemmel":{"houseNumbers":"11,17,2015"},"Mozart:":{"houseNumbers":"75"},"Mutualité":{"houseNumbers":"4"},"O. Van Goidtsenhoven:":{"houseNumbers":"64"},"saint gilles Rodenbach":{"houseNumbers":"54, 57, 61, 63, 65, 81, 85, 87, 105, 107"},"Savoie":{"houseNumbers":"40"},"St-augustin":{"houseNumbers":"8, 13, 15, 19, 21, 28, 39, 42"},"Timmermans":{"houseNumbers":"50,52,66,65,59"},"rue du Tournoi":{"houseNumbers":"34, 36, 8, 20, 40, 38"},"Vanderkindere":{"houseNumbers":"19, 21 ,23, 25, 27,29, 31, 33, 35, 43, 55, 56, 57, 58,67, 69, 71, 75, 79, 83, 84"},"Verhulst":{"houseNumbers":"56"},"Victor Rousseau":{"houseNumbers":"23, 37, 28, 47, 60, 90, 92"},"rue du Vignoble":{"houseNumbers":"19, 39, 41, 45, 47, 49, 51"},"Zodiaque":{"houseNumbers":"35"}};

let map = new GMaps({
  div: '#map',
  lat: 50.8102794,
  lng: 4.3377953
});

let addresses = [];
Object.keys(houses).forEach((street) => {
  addresses = addresses.concat(houses[street].houseNumbers.split(',').map((n) => { return `${street} ${n.trim()}`; }));
});
console.log(addresses);

let drawMarker = (place) => {
  map.addMarker({
  lat: place.location.lat,
  lng: place.location.lng,
  title: place.address,
  click: function(e) {
    alert('Buy this house now? ' + e.title);
  }
});
};

let getCoord = (address, callback) => {
 let param = address.split(' ').join('+');
 param += '+Brussels';
  
  $.getJSON('http://maps.google.com/maps/api/geocode/json?address=' + param + '&sensor=false',
          
    function(data) {
      console.log(data.results[0]);
      if (data.results && data.results.length && data.results[0].geometry) {
      var result = { location: data.results[0].geometry.location, address };
      callback(result);
      } else {
        console.error('could not find ' + address);
      }
    }, function(error){ alert(error); });
};

addresses.forEach(
  (a) => { 
    setTimeout(() => { getCoord(a, (result) => { drawMarker(result); })}, 3000)
  }
);

scripts

<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#map
  width 1200px
  height 900px