GDPR Friendly Google Maps and OSM Embed

CREATE YOUR CUSTOM MAP EMBED HERE —- https://umap.openstreetmap.fr/en/

Very clean and simple way to create custom maps and GDPR friendly. With OSM you can make single or multiple locations no limit no API !

Use the cards for google map links. No one installs OSM mobile thats why we giving Google map links.

<div class="container">
  
<a href="#link_to_the_desired_google_map" target="_blank" class="maplink">
Konyaaltı, Antalya<br>
<span>Altınkum 4170563 Konyaaltı, Antalya</span>
    
</a>
<a href="#link_to_the_desired_google_map" target="_blank" class="maplink maplink2">
    Konyaaltı, Antalya<br>
<span>Altınkum 4170563 Konyaaltı, Antalya</span>
</a>
<a href="#link_to_the_desired_google_map" target="_blank" class="maplink maplink3">
    Konyaaltı, Antalya<br>
<span>Altınkum 4170563 Konyaaltı, Antalya</span>
</a>
<a href="#link_to_the_desired_google_map" target="_blank" class="maplink maplink4">
    Konyaaltı, Antalya<br>
<span>Altınkum 4170563 Konyaaltı, Antalya</span>
</a>

  
  <iframe width="100%" class="map_embed"  frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/en/map/untitled-map_834996?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=null&onLoadPanel=undefined&captionBar=false"></iframe>
  
  
</div>

*{  font-family:Arial;  text-decoration:none;}
* a{color:#FD4539}
* a:hover{color:gray}
.container{  position:relative;}
.map_embed{
    height:625px;
    border:none;
    padding:0;
    margin: 0;
    display:block;
}
.maplink{
    width:230px;
    height:65px;
    display: block;
    top:10px;
    right:10px;
    padding:10px 40px 10px 10px;
    background:white 
    url(https://cdn.sinanisler.com/wp-content/uploads/2022/11/tinmap.png)
    no-repeat;
    background-size: 49px;
    background-position: top right ;
    position:absolute;
    font-size:14px;
    line-height: 20px;
    transition:0.4s;
}
.maplink:hover{ filter: grayscale(100%); }
.maplink:after{
    content:'Directions';
    font-size: 11px;
    position:absolute;
    right:5px;
    top:52%;
}
.maplink span{
    color:gray;
    font-size: 11px;
}
.maplink2{
    top:110px;
}
.maplink3{
    top:210px;
}
.maplink4{
    top:310px;
}

RESULT;

See the Pen
GDPR friendly osm embed, google map by sinanisler (@sinanisler)
on CodePen.