I'm trying to make a simple web app that saves different locations on a indexedDB, and then get those data and mark them in a google geolocation map API.
What I have so far is calling the showMarker from a button, but I can't show them automatically without calling it in a button.
Here's my code:
HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="index.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function(){
init();
};
</script>
<style type="text/css">
#map {
width: 700px;
height: 700px;
}
</style
<title>Google Maps Multiple Markers</title>
</head>
<body>
<div id="map"></div>
<button onclick="showMarker()">Show Markers </button>
</body>
</html>
Javascript:
function init(){
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
});
//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);
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]);
}
}
}
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();
}
};
}
What I want is to load the markers onload as well. But I can't seem to work it out.
Aucun commentaire:
Enregistrer un commentaire