CODEWITHSUNDEEP
htmlgoogle-mapsindexeddb
mtolingan
mtolingan

Reputation: 75

Getting values of cursor from indexedDB

I'm trying to put markers on a google location map API using data I put on an inedexedDB. I'm able to put the markers accurately using the data I get from the DB, but the markers' infowindow doesn't get them accurately.

Here is my code:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <style type="text/css">
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
</head> 
<body>
    <div id="map"></div>
    <button onclick="showMarker()">Show Markers </button>

  <script type="text/javascript">
         //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 db;
         var request = window.indexedDB.open("mapDB", 1);

        var 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) {
                showMarker();
            };
         }

         function showMarker() {
            var infowindow = new google.maps.InfoWindow();
            var marker, i;

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

            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;

               if (cursor) {
                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cursor.value.lat, cursor.value.lng),
                        map: map
                      });

                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                          infowindow.setContent(cursor.value.name);
                          infowindow.open(map, marker);
                        }
                      })(marker, i));
                  cursor.continue();
               }
            };
         }
  </script>
</body>
</html>

I have tried searching and reading other sources but I can't seem to find what's the problem. Help is very much appreciated.

Upvotes: 0

Views: 867

Answers (1)

geocodezip
geocodezip

Reputation: 161334

This is a duplicate of Google Maps JS API v3 - Simple Multiple Marker Example. You need function closure on the name of the marker.

function showMarker() {
  var infowindow = new google.maps.InfoWindow();
  var marker;

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

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(cursor.value.lat, cursor.value.lng),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, name) {
        return function() {
          infowindow.setContent(name);
          infowindow.open(map, marker);
        }
      })(marker, cursor.value.name));
      cursor.continue();
    }
  };
}

proof of concept fiddle

Upvotes: 1

Related Questions