JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

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

CSS

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

JavaScript

var data = ["12.1456", "73.12453", "12.786945", "75.13451", "12.4724", "78.12545"];

var latArray = [];
var lngArray = [];

function initMap() {
  for (i = 0; i < data.length; i++) {
    if (i % 2 == 0) {
      latArray = data[i];
    } else {
      lngArray = data[i];
    }
  }

  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    // was {lat: bla.blahh, lng: blaa.blaahh}
    center: {
      lat: 42,
      lng: -72
    },
    zoom: 15
  });
  for (i = 0; i < data.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.Marker(latArray[i],lngArray[i+1]),
      map: map,
      title: "This is the place."
    });
  }
}

google.maps.event.addDomListener(window, "load", initMap);