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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="18.062222mm"
   height="18.062222mm"
   viewBox="0 0 63.999998 63.999997"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="icon-horse_in_field-pink-64px.svg"
   inkscape:export-filename="/home/cri-ninja/Downloads/icon-horse_in_field-pink-64px.svg"
   inkscape:export-xdpi="90.000008"
   inkscape:export-ydpi="90.000008">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:zoom="7.203125"
     inkscape:cx="5.0594945"
     inkscape:cy="31.999998"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1855"
     inkscape:window-height="1056"
     inkscape:window-x="65"
     inkscape:window-y="24"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(768.57141,-188.3622)">
    <path
       style="opacity:1;fill:#ad7fa8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       d="m -764.57141,188.3622 56,0 0,56 -14,0 -14,8 -14,-8 -14,0 z"
       id="rect3336"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccccccc" />
    <path
       sodipodi:type="inkscape:offset"
       inkscape:radius="-3.1413352"
       inkscape:original="M -764.57227 188.36133 L -764.57227 244.36133 L -750.57227 244.36133 L -736.57227 252.36133 L -722.57227 244.36133 L -708.57227 244.36133 L -708.57227 188.36133 L -764.57227 188.36133 z "
       style="opacity:1;fill:#f7b9fa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="path4220"
       d="m -761.43164,191.50195 0,49.71875 10.85937,0 a 3.1416494,3.1416494 0 0 1 1.5586,0.41407 l 12.4414,7.10937 12.44141,-7.10937 a 3.1416494,3.1416494 0 0 1 1.55859,-0.41407 l 10.85938,0 0,-49.71875 -49.71875,0 z" />
    <path
       d="m -722.55985,223.77048 c -0.1152,0.28847 -0.22356,0.56971 -0.3534,0.82933 -0.60576,1.13221 -1.80288,1.65865 -3,1.88221 l 0,-2.05528 0.87264,0 c 0.16584,-0.42549 0.50472,-0.74279 0.94464,-0.87981 0.13704,-0.0721 0.22356,-0.1875 0.25248,-0.33895 0.0144,0 0.0144,0 0.0144,0 0.1152,-0.94471 0.27408,-1.9399 0.46872,-2.94952 0.0936,-0.2524 0.012,-0.48316 -0.26676,-0.56971 -0.59136,-0.0721 -1.16112,-0.1875 -1.73076,-0.33894 -1.22604,-0.0577 -2.45916,-0.33173 -3.51924,-0.97356 -0.94476,0.51202 -1.29096,1.50721 -1.80288,2.37981 l 0,-0.0144 c -1.21164,1.88941 -2.1924,3.90865 -2.9496,5.99998 -0.0504,0.12982 -0.072,0.26684 -0.072,0.40385 0,0.21635 0.0648,0.41827 0.16584,0.59135 0.57696,0.59135 0.95196,1.31971 1.24764,2.07692 l -2.2788,0.0216 c -0.0144,-0.54807 -0.0648,-1.07451 -0.3894,-1.53606 -0.28848,-0.25239 -0.51204,-0.46874 -0.55536,-0.87259 0.0648,-0.51201 0.3894,-0.96635 0.60576,-1.42789 l 0,0 c 0.26688,-0.5697 0.42552,-1.17547 0.50484,-1.78846 0.0864,-0.52644 0.23076,-1.04566 0.375,-1.5649 0.42552,-1.42067 0.63456,-2.89182 0.92304,-4.34855 -2.56728,0.41105 -5.17068,0.21633 -7.70184,-0.30289 -0.28128,1.49278 -0.7068,2.9351 -1.24764,4.34856 -0.20196,0.73557 0.3678,1.48557 0.7284,2.07692 0.8004,1.1827 1.70184,2.27885 2.47356,3.48317 0.46872,0.57692 0.85812,1.22597 1.161,1.91827 l -2.40864,0.0361 -0.072,-0.8798 c -0.012,-0.12982 -0.012,-0.25962 -0.12264,-0.32453 -0.34608,-0.10812 -0.51924,-0.41106 -0.64176,-0.72837 -0.26688,-0.64182 -0.60576,-1.26201 -1.00968,-1.85336 -0.7428,-1.02403 -1.63692,-1.91827 -2.661,-2.66106 0,0 0,0 -0.0144,-0.0144 -0.26688,-0.17308 -0.3174,-0.45432 -0.3174,-0.74279 0.1008,-0.54086 0.20916,-1.08173 0.30288,-1.6298 0.0864,-1.06009 -0.3894,-2.07693 -1.26192,-2.69712 -0.46884,0.71395 -1.0674,1.3125 -1.73076,1.85337 -0.80052,0.5625 -1.55772,1.1899 -2.25732,1.875 l 0,0 c -0.17304,0.17308 -0.33888,0.33894 -0.49032,0.50481 -0.3678,0.47595 -0.62016,1.03124 -0.82932,1.58653 -0.41832,1.06732 -0.7212,2.09856 -0.93036,3.08654 -0.072,0.32452 0.012,0.64904 0.16596,0.93029 l 0,0 c 0.375,0.49038 0.67788,1.03125 0.89424,1.62981 l -2.2428,0.0216 -0.0144,-1.00962 c 0.0144,-0.0937 -0.0216,-0.14423 -0.072,-0.21634 l -0.0144,0 c -0.3894,-0.19471 -0.53364,-0.54086 -0.47592,-0.95914 0.69228,-1.67307 0.95196,-3.08654 1.36296,-4.58654 l 0,0 c 0.16584,-0.52644 0.20196,-1.09615 0.13704,-1.65144 -0.0432,-0.26683 0.0432,-0.51202 0.20196,-0.72836 0.26676,-0.32452 0.54084,-0.67788 0.82212,-1.03126 0.58404,-0.72836 0.85092,-1.63702 1.02396,-2.53124 0.28848,-1.37741 0.0288,-2.82693 0.17316,-4.26202 0.20904,-1.14664 0.85812,-2.15626 1.58652,-3.03606 -3.29568,0.41827 -2.9568,5.48798 -2.9856,8.06971 0,0.16587 0,0.32452 0,0.50481 l -3,-0.036 c 0.12984,-4.57932 0.7284,-9.93029 6.56976,-9.24519 1.39896,-0.46154 2.79084,-0.94471 4.27644,-0.98077 3.46152,0.0288 6.12972,1.00962 9.56964,0.65624 4.81008,-0.62018 5.35104,-6.41826 10.59372,-6.51922 0.65628,0 1.32696,0.10092 1.95444,0.28846 0.99516,-0.22356 2.01912,-0.28125 3.036,-0.20192 -0.54084,0.42547 -1.04568,0.84374 -1.55052,1.27644 -0.20904,1.33414 -0.0504,2.6827 -0.1008,4.02403 0.0144,0.4327 -0.1008,2.4375 -0.20196,3.33174 0.0576,0.77885 -0.786,1.17547 -1.58652,1.09615 -0.4038,-0.0433 -0.43272,-0.33172 -1.00236,-0.40384 -0.3678,-0.23078 -0.23076,-0.67788 -0.26688,-1.04567 -0.0648,-0.89424 -0.49752,-1.70193 -0.69228,-2.57453 -0.31728,-0.12259 -0.60576,-0.26682 -0.87984,-0.41826 -0.62016,0.97355 -0.94464,2.09134 -0.95916,3.23076 -0.0216,1.00962 -0.036,2.01924 -0.036,3.02885 0,-0.0721 0,-0.0216 -0.0144,0.0144 -0.0504,0.77163 -0.26688,1.51442 -0.62748,2.17788 1.32696,0.22356 2.5962,0.62741 3.80772,1.21154 0.49044,0.27403 1.1034,0.51923 1.42788,1.00962 0.0144,0 0.0144,0 0.0144,0.0144 0.17316,0.27405 0.18756,0.59135 0.12264,0.89424 -0.3678,1.69471 -0.82212,3.24519 -1.44228,4.5649 z"
       id="path12"
       inkscape:connector-curvature="0"
       style="fill:#ffffff" />
  </g>
</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.