JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<!--The div element for the map -->
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyAnknYXBKnUYxV21vTn5rvvDkOVrAHVTvc&callback=initMap"></script>

CSS

/* Always set the map height explicitly to define the size of the div * element that contains the map. */
#map { height: 100%; }
/* Optional: Makes the sample page fill the window. */
html, body { height: 100%; margin: 0; padding: 0; }

JavaScript

// Initialize and add the map
function initMap() { 
  // The location of Uluru
  var aviapark = {
    lat: 55.790320, lng: 37.531310,
  }; 
  var sportmaster = {
    lat: 55.789976, lng: 37.534743,
  };
  var mvideo = {
    lat:  55.790145, lng: 37.527522,
  };
  // The map, centered at Uluru
  var map = new google.maps.Map( document.getElementById('map'), {zoom: 17, center: aviapark}); 
  // The marker, positioned at Uluru
  var aviaMarker = new google.maps.Marker({position: aviapark, map: map});
  var sportMarker = new google.maps.Marker({position: sportmaster, map: map});
  var mvideoMarker = new google.maps.Marker({position: mvideo, map: map});
}