0

I have this:

    function initMap() {
      // Create a new map object focused on PA
      map = new google.maps.Map(document.getElementById('Map'), { 
        zoom: 8, 
        center: { lat: 41, lng: -78 },
       });

I would like the user to be able to zoom in and switch the data on the map to show some other variable without the map resetting the center and zoom level.

Matchinski
  • 65
  • 1
  • 1
  • 5

1 Answers1

0

You have a couple of choices to choose from. Both require using the various events available in the maps API to get whatever state you want to store.

You can create an object with zoom & center every time a change is made to either and stringify it to JSON and store in browser localStorage. When page loads you get what is stored (if any) and parse it back to an object you can pass to the map initialization

The alternative would be to use window.history.pushState() and URLSearchParams() to modify query string in the url when a change occurs. Then when page loads get whatever params are in the url to pass to the initialization

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • I understand roughly what to do conceptually, but I don't know how to actually get the values or save the values. The google maps API has been confusing me for weeks. `map.getZoom()` works but `map.getCenter()` does not. – Matchinski Mar 30 '21 at 23:16
  • In that case create a [mcve] and deal with those issues independently in another question. I only answered what was asked here as a general question and am not intending on writing all the code out to do it – charlietfl Mar 30 '21 at 23:25
  • That's not really helpful at all... I don't have any idea how to get the location values – Matchinski Mar 30 '21 at 23:43