Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/google-maps-api.markdown

Last active November 26, 2017 20:08
Show Gist options
  • Save hugolpz/a04edea24fad47bdb17f90c97c0880b7 to your computer and use it in GitHub Desktop.
Save hugolpz/a04edea24fad47bdb17f90c97c0880b7 to your computer and use it in GitHub Desktop.
Download ZIP
Google maps api
Display the source blob
Display the rendered blob
Raw
icon-horse_in_field-blue-64px.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
icon-horse_in_field-darkblue-64px.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
icon-horse_in_field-darkpink-64px.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
icon-horse_in_field-green-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-green-64px.svg">
<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="10.61264"
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:#73d216;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:#4e9a06;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 -720.55985,218.0785 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" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.06595182;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -760.13446,218.00928 15.70884,7.31994 15.70885,0 15.70884,-7.31994"
id="path3404"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path4206"
d="m -760.13446,228.00928 15.70884,7.31994 15.70885,0 15.70884,-7.31994"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2.06595182;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.98897481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -759.57671,217.3622 0,20"
id="path4208"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path4210"
d="m -744.25695,223.3622 0,20"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.98897481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.98897481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -728.93719,223.3622 0,20"
id="path4212"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path4214"
d="m -713.61743,217.3622 0,20"
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.98897481;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
icon-horse_in_field-pink-64px.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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>
Raw
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);
}
}
Raw
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment