Google maps api

google-maps-api.markdown

Google maps api

A Pen by Lopez Hugo

License.

icon-horse_in_field-blue-64px.svg

icon-horse_in_field-darkblue-64px.svg

icon-horse_in_field-darkpink-64px.svg

icon-horse_in_field-green-64px.svg

icon-horse_in_field-pink-64px.svg

index.html

<script src="./script.js"></script>
<link href="./style.css">

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXZIA_lmLmGxCID0faVDJipT7nGvQ4__o&callback=initMap">
</script>

script.js

var Data = [
  { name: "Lilia Lilou", gender: "girl", address: "8 Rue des Airborn, 14850 Hérouvillette", service: "cours" },
  { name: "Thomas Timou", gender: "boy", address: "Ecurie D'Herouvillette, 14850 Hérouvillette", service: "box" },
  { name: "Cecile Celiou", gender: "woman", address: "14-22 Rue des Carrières, 14860 Ranville", service: "box" },
  { name: "Jacqueline Jacou", gender: "woman", address: "23-1 Rue Léopold Trebutien, 14121 Sallenelles", service: "box" },
  { name: "Thomas Timou", gender: "girl", address: "Gonneville-en-Auge", service: "box" },
];
var keys = { boy: "blue",girl: "pink",woman:"darkblue", man: "darkpink", box: "horse_in_enclosure", cours: "horse_in_field" };


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(49.23, -0.3)
  });

  var gc = new google.maps.Geocoder();
  //2. Function creates a marker for given address and places it on the map
  // API: https://developers.google.com/maps/documentation/javascript/reference?hl=fr#Marker
  var placeAddressOnMap = function (address, gender, service) {
    gc.geocode(
      {'address': address},
      function (res, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          new google.maps.Marker({
            position: res[0].geometry.location,
            map: map,
            icon: './icon-'+keys[service]+'-'+keys[gender]+'-64px.svg'
          });
        }
      }
    );
  }
  // 3. Iterate Data and place markers
  for (var i in Data) {
    var d = Data[i];
    placeAddressOnMap(d.address, d.gender, d.service);
    setTimeout(function () { i = i }, 2000); // failing delay: setTimeout(function () { }, 2000);
  }

}

style.css

#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
// To do: create several icons with different suffixes, put them in a same folder online.