How to use localstorage data in google maps?

Question

I have a google maps which works fine.

I populate the Map's markers/locations like so:

var locations = [
['Test 1', 'somewhere', 'map-marker-icon.png']
             , 

             ['Test 2', 'London', 'map-marker-icon.png']
             , 

             ['Test 3', 'essex', 'map-marker-icon.png']
             , 


];

Now, if I run my code like that with all the locations inside my HTML file like above, my code works fine and all the markers are being shown on my map.

However, I also have the exact same locations stored in localstorage and I can see them in Firestorage/Firbug.

The localstorage looks like this:

['Test 1', 'somewhere', 'map-marker-icon.png']
             , 

             ['Test 2', 'London', 'map-marker-icon.png']
             , 

             ['Test 3', 'essex', 'map-marker-icon.png']
             ,

So I tried to use the localstorage to create the Map's Markers like so:

var nowMarker = localStorage.getItem('mapMarkers');
var locations = [
nowMarker
];

but this doesn't work at all and I mean i don't get any markers on my map whatsoever!

is this even possible and if so, what is the best way of doing this?

Any help/advise would be appreciated.

Here is a working FIDDLE

If you copy/paste the locations from the top of the page into the var locations = [....]; the code works fine... but when I try to use the same locations/string/array or whatever you will call it, from the localstorage, I get no markers on the map.

EDIT

Based on what Sam's given me in his answer, I tried to change it slightly so I can do it my way but I still cannot make it work!

Here is a FIDDLE

Basically, I set the localstorage first, and then try to get it back and then use it in the locations.

Sam W · Answer 1 · 2016-06-10T18:15:27.707

2

localStorage.setItem('mapMarkers', JSON.stringify(locations));
locations = JSON.parse(localStorage.getItem('mapMarkers'));

Give this a try. Didn't test but it should work fine.

Edit: added this into your fiddle

edited Jun 10 '16 at 18:15

answered Jun 10 '16 at 17:37

Sam W

599
2
16

no it doesn't work unfortunately. here is your code which doesn't work: https://jsfiddle.net/8yL2vhoe/14/ – Jackson Jun 10 '16 at 17:42
the variable 'locations' in your jsfiddle is not equivalent to the one you gave in your question. I just tested, this works if you use the variable in your question. You might want to give [link](http://jsonviewer.stack.hu) a look to give you a visual representation of your JSON objects. – Sam W Jun 10 '16 at 18:03
How did you test it? I tested it with the exact same 'locations' in my question and it still doesn't work! Here is the fiddle: https://jsfiddle.net/8yL2vhoe/15/ – Jackson Jun 10 '16 at 18:15
See my edit. I updated your fiddle with this and it works. – Sam W Jun 10 '16 at 18:16
Sorry, I think you didn't understand the question! You are setting the ''locations'' directly from the html/javascript! My code works fine like that as I stated in my question... I need to get the locations from the localstorage like the fiddle shown in my question: https://jsfiddle.net/8yL2vhoe/13/ – Jackson Jun 10 '16 at 18:20
The JSON object is being saved into localstorage directly from the javascript in both of our sources. The only difference is that you are setting localstorage straight from a text string and reading it into a variable, where I am setting localstorage from a variable and reading it straight back from localstorage into the same variable. – Sam W Jun 10 '16 at 18:29
I still failed to understand the similarity between your fiddle and mine! you are setting the location from the html and I am getting them from local storage! – Jackson Jun 10 '16 at 18:44
Here is another fiddle using your example shown in your fiddle: https://jsfiddle.net/cfek2qee/2/ – Jackson Jun 10 '16 at 18:46
I need to be able to get the location directly from the localstorage as opposed to setting them directly from the html.. – Jackson Jun 10 '16 at 18:47
Unfortunately I don't have enough rep to just chat with you so I don't really have an option but to keep commenting, but I assure you the jsfiddle in my answer IS reading from localstorage. IDK how else to explain it to you, but good luck. – Sam W Jun 10 '16 at 18:50
read [this](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage?rq=1) It may help you understand JSON and localstorage better. Also a possible duplicate question. – Sam W Jun 10 '16 at 19:16
if you look at the last fiddle in my question, I'm doing what's shown in the link you've posted! – Jackson Jun 10 '16 at 19:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114387/discussion-between-jackson-and-sam). – Jackson Jun 10 '16 at 19:25

How to use localstorage data in google maps?

1 Answers1