Alternative a Google Maps per siti web?

Durante il web 0.1 o 1.0 si inserivano mappe grafiche prive in strumenti. Con l'avvento dei servizi di Mappe satellitari disp...

Durante il web 0.1 o 1.0 si inserivano mappe grafiche prive in strumenti. Con l'avvento dei servizi di Mappe satellitari disponibili gratuitamente su web l'utilizzo di questi servizi è praticamente diventato uno standard inserire una inclusione (un iframe) di una di queste mappe nella pagina contatti di un sito web.

Attualmente il servizio più famoso ed utilizzato è Google Maps

Esempio codice di inclusione

<iframe allowfullscreen="" height="450" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44622.80616082465!2d13.783661949999999!3d45.65232015000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477b6b06e4edf533%3A0x666a2484d4dd2b50!2sTrieste%20TS!5e0!3m2!1sit!2sit!4v1670653883620!5m2!1sit!2sit" style="border: 0;" width="600"></iframe>

Quali sono le alternative che si possono valutare a questo servizio?

TuttoCitta.it

La prima che vi propongo è una soluzione tutta italiana di italiaonline ed è il servizio TuttoCitta.it

Nota bene che trovare l'iframe di inclusione nel sito tuttocitta.it non è molto evidente, e questo ritengo sia una pecca, dovrebbero renderlo molto più evidente perché l'inclusione della propria mappa in un altro sito è tutta pubblicità gratuita al loro servizio che può portare traffico al loro sito. 

Detto ciò per trovare l'iframe da includere allo stato attuale bisogna cliccare sull'icona per i link (sotto l'icona Hotel), là vi propone "Invia mail", subito sotto cliccate su Invia Link perché là troverete "Incolla HTML da incorporare nel sito web.

Nota anche che sotto al codice proposto trovi Personalizza e visualizza in anteprima la mappa incorporata che apre un popup nel quale è possibile personalizzar la dimensione di inclusione. Ovviamente se conosci il codice HTML lo puoi fare a manina modificando in style i parametri di height e width.

Esempio codice di inclusione

<iframe style="width:450px;height:450px" src="https://www.tuttocitta.it/inlineMap?cx=13.78259&cy=45.64952&z=3&lx=13.78422&ly=45.64934">SEATPG Map</iframe>

---

OpenStreetMap.org

Finito il campanilismo, il mio servizio preferito è sicuramente OpenStreetMaps.org perché è possibile contribuire nel miglioramento della mappa.

Visualizza mappa ingrandita

Esempio codice di inclusione

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=13.579788208007814%2C45.59290020826985%2C13.901138305664064%2C45.76057725829968&layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=12/45.6768/13.7405">Visualizza mappa ingrandita</a></small>

Possiamo subito notare che rispetto agli altri due servizi nell'inclusione non c'è la possibilità di passare alla visualizzazione via satellite. Però è possibile includere la mappa in 6 modalità diverse:

1. Standard (quella sopra)
2. CyclOSM
3. Mappa ciclabile
4. Mappa Trasporti (quella qui sotto nella quale si vedono bene la linea ferroviaria, i tracciati degli autobus, ingrandendo anche le fermate ed i numeri delle linee)
5. OPNVKarte
6. Umanitario

Visualizza mappa ingrandita

Esempio codice di inclusione

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=13.752608299255373%2C45.64254422253333%2C13.792777061462402%2C45.66351275570626&layer=transportmap" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=15/45.6530/13.7727&layers=T">Visualizza mappa ingrandita</a></small>

Per maggiori informazioni sul progetto Open Street maps si veda: https://it.wikipedia.org/wiki/OpenStreetMap

---

Bing

Per includere una mappa di Bing Maps dopo aver scelto la località nella barra di ricerca e premuto invio, cliccate sui "Altro" (tre puntini), da li accedete alla voce di menu > Incorpora una mappa
Vi propone una pagina nella quale potete modificare alcuni parametri e posizionare la mappa in modo visivo semplicemente trascinandola. Anche Bing non fornisce nell'inclusione la possibilità di cambiare visualizzazione da mappa a satellitare.

Visualizza mappa più grande   |   Ottieni indicazioni stradali

Esempio codice di inclusione

<div><iframe width="500" height="400" frameborder="0" src="https://www.bing.com/maps/embed?h=400&w=500&cp=45.64236798024288~13.79642486569287&lvl=12&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no"> </iframe> <div style="white-space: nowrap; text-align: center; width: 500px; padding: 6px 0;"> <a id="largeMapLink" target="_blank" href="https://www.bing.com/maps?cp=45.64236798024288~13.79642486569287&sty=r&lvl=12&FORM=MBEDLD">Visualizza mappa più grande</a>   |   <a id="dirMapLink" target="_blank" href="https://www.bing.com/maps/directions?cp=45.64236798024288~13.79642486569287&sty=r&lvl=12&rtp=~pos.45.64236798024288_13.79642486569287____&FORM=MBEDLD">Ottieni indicazioni stradali</a> </div> </div>

---

Yandex.com Maps

In Yandex.com/maps l'opzione di share in modalità di inclusione si trova nel menu a sinistra "tre puntini ... " > Share > WIDGET WITH MAP
Qui consiglio di cliccare su Preview per vedere l'anteprima. Come è possibile vedere il brand Yandex risulta essere decisamente invasivo per le inclusioni della mappa in altri siti web. Sarebbe stato meglio una brandidazione della mappa più discreta. Avrebbe agevolato le condivisioni.

TriestTriest — Yandex Maps

Esempio codice di inclusione

<div style="position:relative;overflow:hidden;"><a href="https://yandex.com/maps/21020/triest/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Triest</a><a href="https://yandex.com/maps/21020/triest/?ll=13.790545%2C45.648866&mode=search&ol=geo&ouri=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgoyMjI4MzQzMTcwEjNJdGFsaWEsIEZyaXVsaS1WZW5lemlhIEdpdWxpYSwgbGEgY2l0dMOgIGRpIFRyaWVzdGUiCg3ckVxBFT%2BgNkI%3D&utm_medium=mapframe&utm_source=maps&z=12.81" style="color:#eee;font-size:12px;position:absolute;top:14px;">Triest — Yandex Maps</a><iframe src="https://yandex.com/map-widget/v1/-/CCUnA2UnpD" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>

---

Here.com

Menziono anche il serivizio wego.here.com

Le loro indicazioni prevedono la creazione di un utente e l'uso di un ID come è possibile vedere qui: https://developer.here.com/documentation/embedded-editor/dev_guide/topics/add-to-website.html