Re-centering an html map using onmessage (or any other way)

Ask the community
,
1

Hi there,

I have a map which populated with locations (works perfectly). I want to add functionality that when a dropdown item is selected, the map will panTo (or recenter) to that location.

I’ve tried using a post message, onmessage handler, but it doesn’t seem to work.

This is my post message code:

wixData.query("Neighborhoods")
    .eq("title", neighborhood)
    .find()
    .then( (results) => {
        let l1 = results.items[0].longitude
        let l2 = results.items[0].latitude
        console.log(l1,l2)
        let center = ({lat: l1, lng: l2})
        $w('#htmlMap').postMessage({center});
    })

Here’s the on message code in the html element:

function changeMarkerPos(){
    window.onmessage = (event) => {
        myLatLng = event.data.center;
        marker.setPosition(myLatLng);
        map.panTo(myLatLng); 
        map.setCenter(myLatLng);    
    }
}

The map doesn’t change location, and my markers disappear. Any help would be amazing!

Thanks!

2

Hi :raised_hand_with_fingers_splayed:

Why don’t you use the built-in Google Maps API ?

You can then set the location based on the selected option:

$w('#dropdown1').onChange((event) => {
    $w('#googleMaps1').location = {
        "latitude": 37.77065,
        "longitude": -122.387301,
         "description": "Location Name"
    }
})

You just need to create an object containing the values from the dropdown menu or a database that stores the latitude, longitude and description as well as the value of the dropdown menu.

Ahmad

3

I need it so that when a pin is clicked, information from my database about that location is displayed. It doesn’t seem that the built-in map works for that.

I also need multiple pins to show at a time and remain static to that a user can snap to a location but still move the map and see all of the others if that makes any sense.

4

You can add as much locations as you want to the map, then create an onClick() function that will get the current location and display its details in a text box next to the map.

5

so the onClick() handler is for the location markers not the map itself?