samedi 28 décembre 2019

Updating Google Maps Long/Lat

I am trying to update a store location by getting the lat/long of a marker on the google map. However I get this error:

UpdateStoreDAO.js:7 Uncaught TypeError: Cannot read property 'getPosition' of undefined
    at updateItemData (UpdateStoreDAO.js:7)
    at UpdateStore.js:68
    at IDBOpenDBRequest.request.onsuccess (indexedDB.js:38)

I'm not quite sure why it won't work as getPosition works for adding a store location to the map for a marker. It uses the same Google Maps API as my adding page does and the add page never threw me this error.

The code for the update function (DAO) is:

function updateItemData(marker) {
    //User input of item name
    var storeLocation = $('#txtStoreLocation').val();
    //Get latitude and longitude of current marker position
    var eventLat = marker.getPosition().lat();
    var eventLng = marker.getPosition().lng();

    //Create an item object combining name, desc and price attributes
    data.storeLocation = storeLocation;
    data.eventLat = eventLat;
    data.eventLng = eventLng;

    var data = {
        'storeLocation' : storeLocation,
        'eventLat' : eventLat,
        'eventLng' : eventLng
    }

    //Insert data into indexedDB database
    updateOne(data, function(lastID) {
        event.preventDefault();
        return false;
    });
}

The code for the update store js file is (if it's any help):

//mapCenter 
var mapCenter = new google.maps.LatLng(51.8979988098144,-2.0838599205017);
//geocoder will be used to convert geographic coordinates (current marker position)
// intop a human-readable address
var geocoder = new google.maps.Geocoder();
//An InfoWindow displays content (usually text or images)
//in a popup window above the map, at a given location.
var infowindow = new google.maps.InfoWindow();

function initialize(){
    // Initial map properties
    var mapOptions = {
        zoom: 15,
        center: mapCenter
    };

    //Create a map object passing the html div placeholder to hold google map
    myMap = new google.maps.Map(document.getElementById("mapInput"), mapOptions);

    //Create a draggable marker icon in the map
    marker = new google.maps.Marker({
        map: myMap,
        position: mapCenter,
        draggable: true
    });
}

//Retrieve Item information saved in database 
//show in the form
var urlParams = new URLSearchParams(window.location.search);
var itemID = urlParams.get('itemID');
$('#itemID').html("Item ID: " + itemID);

setDatabaseName('dbCatalogue', ['UsersObjectStore', 'ItemsObjectStore']);
setCurrObjectStoreName('ItemsObjectStore');
//Select One function to retrieve data of a specific item
var data;
startDB(function () {
    selectOne(itemID, function(result) {
        $('#txtStoreLocation').val(result.storeLocation);
        $('#txtEventLat').val(result.eventLat);
        $('#txtEventLng').val(result.eventLng);
        data = result;
    })
})



//The addDomListener will be triggered when the HTML page is loaded
//and will execture the initialize function above
google.maps.event.addDomListener(window, 'load', initialize);

//Event handler for form submit button
$('#formUpdateStore').submit(function(event){

    // cancels the deafult form submission and handle the event from javascript
    event.preventDefault();

    //Create an idexedDB database (the name of the database is dbFlogger) 
    // with two object stores - UsersObjectStore to store user data 
    // and ItemsObjectStore to store item data
    setDatabaseName('dbEvent', ['EventObjStore']);
    // For this example, we will store data in ItemsObjectStore
    setCurrObjectStoreName('EventObjStore');
    //startDB will create a connection with the database and
    //execute operations such as save item
    startDB(function () {
        updateItemData(data);
        alert("Store has been updated successfully!");
    });
});

I understand it's probably a lot to ask but any help would be appreciated!




Aucun commentaire:

Enregistrer un commentaire