hugolpz · November 26, 2017 20:08
diff --git a/google-maps-api.markdown b/google-maps-api.markdown
diff --git a/icon-horse_in_field-blue-64px.svg b/icon-horse_in_field-blue-64px.svg
diff --git a/icon-horse_in_field-darkblue-64px.svg b/icon-horse_in_field-darkblue-64px.svg
diff --git a/icon-horse_in_field-darkpink-64px.svg b/icon-horse_in_field-darkpink-64px.svg
diff --git a/icon-horse_in_field-green-64px.svg b/icon-horse_in_field-green-64px.svg
diff --git a/icon-horse_in_field-pink-64px.svg b/icon-horse_in_field-pink-64px.svg
diff --git a/index.html b/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>

diff --git a/script.js b/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);
  }

 }
diff --git a/style.css b/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.
	<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>
	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);
	}

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