Vdelava zemljevida na vašo spletno stran s HTML kodo

Uvod: Specifični primeri uporabe HTML kode

Preden se poglobimo v splošne principe in tehnike, si oglejmo nekaj konkretnih primerov, kako lahko v HTML vključimo zemljevide in GPS podatke. To nam bo pomagalo pri razumevanju osnovnih konceptov in možnosti, ki jih ponujajo različni pristopi.

Primer 1: Vdelava Google Zemljevida

Najbolj pogost način prikaza lokacije na spletni strani je vdelava Google Zemljevida. To dosežemo z uporabo iframe-a in ustrezne URL-ja, ki ga generira Google Maps API. Ta URL vsebuje parametre, kot so geografske koordinate (zemljepisna širina in dolžina), raven povečave in druge nastavitve. Primer kode:

<;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2782.652673897862!2d14.50619011553774!3d46.05693197910676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47656c7f86656641%3A0x1e82767a22286f3!2sLjubljana%2C%20Slovenia!5e0!3m2!1ssl!2ssi!4v1678886722725!5m2!1ssl!2ssi" width="600" height="450" style="border:0;" allowfullscreen=" loading="lazy" referrerpolicy="no-referrer-when-downgrade">;<;/iframe>;

Ta koda prikaže zemljevid Ljubljane. Pomembno je omeniti, da je treba za uporabo Google Maps API-ja ustvariti API ključ in ga ustrezno konfigurirati. To omogoča bolj nadzorovano in prilagodljivo vdelavo zemljevidov.

Primer 2: Uporaba Leaflet.js

Leaflet.js je odprtokodna knjižnica JavaScript, ki omogoča ustvarjanje interaktivnih zemljevidov. Ponuja večjo prilagodljivost kot vdelava Google Zemljevidov, hkrati pa zahteva bolj zapleteno kodo. Za uporabo Leaflet.js-ja je potrebno vključiti ustrezne datoteke JavaScript in CSS v HTML.

<;link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css

oznake: #Html #Koda

Sorodni članki: