Vi har kollat mer på Google Maps idag, framförallt Geolocation men också hur man kan lägga till egna informationsrutor på en kartas markörer.
Länkar:
Best practice
https://developers.google.com/maps/documentation/geolocation/web-service-best-practices
Geolocation
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation#all
W3C Geolocation standard
https://w3c.github.io/geolocation-api/
Geolocation API Guide
https://developers.google.com/maps/documentation/geolocation/overview
Markörer
https://developers.google.com/maps/documentation/javascript/markers
Custom Info Windows
https://developers.google.com/maps/documentation/javascript/infowindows
HTML5 Geolocation API
https://www.w3schools.com/html/html5_geolocation.asp
JavaScript Navigator Object
https://www.w3schools.com/jsref/obj_navigator.asp
Workshop 1:
Utgå från grundkartan som vi kollade på igår och gör sedan detta:
Lägg till 4 nya markörer på våran karta. Platser är valfria. Varje markör ska ha en egen inforuta (med relevant info) och ikon.
Eftermiddag:
Vi pratade om Geocoding och hur det kan användas för att omvandla en adress till koordinater.
https://developers.google.com/maps/documentation/javascript/geocoding
Workshop 2:
- Bygg om våran karta så att den använder Geocoding istället för rena koordinater. Fundera på hur man kan spara adresserna (objekt, array mm.).
- Lägg in adresser till minst 6 st. Webhallen butiker.
- Skapa nya infoWindows till varje butik, kanske kan vi hämta värden så som plats, öppettider, adress osv. Från ett objekt?
- Lägg till en custom logotyp på dina butiker/infoWindows.
- Lägg till stöd för Geolocation (HTML5 eller Googles API).
- Lägg till en knapp som triggar Geolocation-funktionen (typ: ”Visa min plats”).