Responsive Map Markers

Question

I have a div that contains a map for a viable city. I need to put some pins or markers in it, but my problem is that the contacts change location based on the width of the window.

How to fix this, no matter what browser size is used, are contacts located in one place on the map ?

<div class="MapContainer"> <a href="http://www.google.dk" style="position: absolute; top: 240px; left: 650px;"> <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Bageri" /> </a> <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Rådhus" /> </a> <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Nærbrugs" /> </a> <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Ejendomshandel" /> </a> <a href="http://www.google.dk" style="position: absolute; top: 258px; left: 670px;"> <img class="pin" src="~/Content/1453392082_map_pin_fill.png" data-val-text="Avis" /> </a> </div> 

 .MapContainer { background-image: url('../Content/bastumhuhej2.png'); position: relative; background-size: contain; height: 100vh; background-repeat: no-repeat; } 

Answer 1

I would suggest using an image tag rather than a background image for a map. Thus, the container can adapt its size to fit the map.

Then you can position the markers with absolutely the top and left percent. This will allow the markers to move around with the map and stay in the same position as in the following example:

 div{ position:relative; } img{ display:block; width:100%; } .marker{ position:absolute; width:10px;height:10px; border-radius:50%; background:red; } .marker:nth-child(2){ left:21%; top:30%; } .marker:nth-child(3){ left:58%; top:60%; } 

 <div> <img src="http://i.imgur.com/xUBZg0y.png" /> <span class="marker"></span> <span class="marker"></span> </div>