Da bi ste ugradili i koristili naprednije opcije Google maps-a potreban
vam je API key. API key, koji naravno, se naplaćuje nakon što ste
prekoračili određeni broj HTTP zahtjeva. Problem je (barem meni)
nejasnost i gnjavaža oko izdavanja API key-a. A ja bih samo želio imati
jednostavnu mapu sa markerom.

Što je iframe? Iframe je HTML ‘okvir’ u kojem je sadržaj vanjski
HTML ili neka druga vanjska stranica.

Prvo što mi je palo na pamet su HTML ‘image maps‘. Ukratko, moguće je
odrediti koordinate na slici. Kada kliknete na određeni dio slike,
aktivirate HTML link ili JS funkciju preko ‘onclick’ HTML atributa.

Srećom, nakon detaljnije internet pretrage pronašao sam Leaflet.
Leaflet je open-source Javascript lib i može poslužiti kao “besplatna”
zamjena za Google maps. Leaflet je vrlo developer-friendly i jednostavan
za korištenje.

Prije svega, potrebno je ubaciti sam lib i njegovu CSS datoteku.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

Nakon toga određujemo HTML element kontejner:

<div id="mapid" style="width: 600px; height: 400px;"></div>

Na kraju HTML datoteke dodajmo script blok.

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

‘mapid’ je id elementa. ‘51.505, -0.09′ su početne koordinate. a ’13’ je zoom.

’tileLayer’ metoda je sljedeća.

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGVsZXZpY2FsYXJpZWwiLCJhIjoiY2tvemE1MDhpMGJ0YzJ3bnpycG9pMm50eiJ9.gMiP0-2PNMaGxutz71_4Aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(mymap);

I na kraju dodajemo marker.

L.marker([45.20717163512203, 19.110093731131318]).addTo(mymap).bindPopup('<b>Hola!</b>');

Koordinate možete dobiti sa Google Maps-a sa desnim klikom na mapu.

Za token se je potrebno registrirati na mapbox i tamo zatražiti
novi API token koji može biti vezan sa vašom stranicom. Ja ovdje koristim access_token
iz Leaflet primjera.

Cijela HTML datoteka:

<!DOCTYPE html>
<html>
<head>
	
	<title>Quick Start - Leaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
	
</head>
<body>



<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

	var mymap = L.map('mapid').setView([45.20717163512203, 19.110093731131318], 10);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGVsZXZpY2FsYXJpZWwiLCJhIjoiY2tvemE1MDhpMGJ0YzJ3bnpycG9pMm50eiJ9.gMiP0-2PNMaGxutz71_4Aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

    L.marker([45.20717163512203, 19.110093731131318]).addTo(mymap).bindPopup('<b>blog.ioox.studio!</b>').openPopup();

</script>



</body>
</html>