Displaying multiple locations on Maps (iframe) - google-maps

Question

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.

Answer 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>