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 = [
  ['43.950797', '-70.008668'],
  ['43.922054', '-69.815379'],
  ['43.945643', '-69.814847'],
  ['43.916745', '-69.814851'],
  ['43.937735', '-69.814825'],
  ['43.927014', '-69.812689'],
  ['43.930439', '-69.814131'],
  ['43.921633', '-69.81421'],
  ['43.919606', '-69.81313'],
  ['43.950001', '-69.808815'],
  ['43.924714', '-69.815335']
]


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);