JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

JavaScript

const locations = [
  [33.6595, -117.9988]
]


function init() {
  const bounds = new google.maps.LatLngBounds()
  const map = new google.maps.Map(document.getElementById('map'));

  locations.forEach(([lat, lng]) => {
    const position = new google.maps.LatLng(lat, lng)

    bounds.extend(position)

    new google.maps.Marker({
      position,
      map
    })
  })

  map.fitBounds(bounds)
}


google.maps.event.addDomListener(window, 'load', init);