-1

enter image description here

Is there a way to achieve something exactly like this? I need to add two separate locations on a single map. Two divs on the top-left are important. I created a map and added two locations. But the view we get is completely different from the normal google maps.

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
Faide Mercer
  • 47
  • 4
  • is the screenshot not proof that there is a way to achieve that? – jsotola Jul 01 '22 at 05:42
  • what is the view that you get? – jsotola Jul 01 '22 at 05:43
  • @jsotola This is an edited image – Faide Mercer Jul 01 '22 at 06:25
  • @jsotola https://ibb.co/kHJB9yY – Faide Mercer Jul 01 '22 at 06:30
  • You can use Google Maps API to do that. It seems that similar question was answered [here](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) and guys discussed a lot of way to achieve such results. Also you can read [this tutorial](https://www.etutorialspoint.com/index.php/21-how-to-add-multiple-custom-markers-on-google-map) or [this explanation](https://laratutorials.com/add-multiple-markers-on-google-map-javascript/). – liketaurus Jul 01 '22 at 07:29

1 Answers1

-1

You can use Google Maps API to do that as shown here (I've just apply some small modifications to original answer to make it pure JavaScript-based):

var mapDiv = document.createElement('div');
mapDiv.setAttribute("id", "map");
mapDiv.style.cssText = 'display: table; width: 100vw; height: 100vh;';
document.body.appendChild(mapDiv);

var locations = [
      ['<h3>Dnipro</h3>You must visit this city!', 48.47672904338519, 34.99977516526972, 4],
      ['<h3>Lvyv</h3>A western capital of Ukraine', 49.84196798934066, 24.0256235253287, 3],
      ['<h3>Kharkiv</h3>A first capital of Ukraine', 49.9968725638038, 36.232661130479805, 2],
      ['<h3>Kyiv</h3>A capital of Ukraine', 50.464300,30.494800, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: new google.maps.LatLng(50.4,30.4),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

You can see the the result on Codepen

Info divs can be added in that way (just a sample):

<style>
  #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; 
  width:200px;height:100px;border:1px solid black; background: white; }  
</style>

<div id="over_map">
  <h4>This is a first place</h4>
</div>
liketaurus
  • 152
  • 5