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>
<button onclick="showMarker()">Show Markers </button>
<div id="map"></div>

CSS

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

JavaScript

var db;
var map;
function init() {
  //prefixes of implementation that we want to test
  window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

  //prefixes of window.IDB objects
  window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
  window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

  if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB.")
  }
  var request = window.indexedDB.open("mapDB", 1);

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(11.980433, 121.918866),
    mapTypeId: google.maps.MapTypeId.HYBRID
  });

  const locData = [{
    id: "00-01",
    name: "Boracay",
    lat: 11.980433,
    lng: 121.918866
  }, {
    id: "00-02",
    name: "Baguio City",
    lat: 16.402333,
    lng: 120.596007
  }, {
    id: "00-03",
    name: "Isdaan",
    lat: 15.475479,
    lng: 120.596349
  }, {
    id: "00-04",
    name: "Mount Pinatubo",
    lat: 15.142973,
    lng: 120.349302
  }];

  request.onerror = function(event) {
    console.log("error: ");
  };

  request.onsuccess = function(event) {
    db = request.result;
    console.log("success: " + db);
  };

  request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("location", {
      keyPath: "id"
    });

    for (var i in locData) {
      objectStore.add(locData[i]);
    }

    db.onsuccess = function(event) {
    console.log("success function");
      showMarker();
    };
  }
}

google.maps.event.addDomListener(window, "load", init);
var bounds = new google.maps.LatLngBounds();
function showMarker() {
  var infowindow = new google.maps.InfoWindow();
  var marker;

  var objectStore = db.transaction("location").objectStore("location");

  objectStore.openCursor().onsuccess = function(event) {
 ...