Map block not correctly identifying some locations

[dhackneya8c]

Quick summary

User is trying to add a marker for their location and the map places it in an incorrect location each time, despite searching on Apple Maps independently for the address and seeing the right location there. Here's an example using the address 10130 W Riverside Dr, Toluca Lake, CA:

Here's Apple Maps displaying the correct location for that address:

I tried this with multiple addresses and in every instance, the marker was not in the correct location for the address and the block doesn't offer a way to manually change its location.

Steps to reproduce

1. Add Map block to any page
2. Add new marker
3. Enter address, select from auto-complete options
4. Marker places incorrectly

What you expected to happen

The marker should be in the correct exact location.

What actually happened

The marker is not placed in the correct location.

Impact

Most (> 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

No response

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

Tested with the address to the Eiffel Tower: 5 Avenue Anatole France 75007 Paris France. It seems like the issue could be that the Map Block can't move off-road with markers, so it picks something close.

Apple Maps (Desktop App on a Macbook)

Map Block

Simple	Atomic	Closeup

Google Maps

📌 ACTIONS

• Transferred to Jetpack repo

[brittanygray902]

Just adding in to this report that I have another user who has been impacted by this: 7630601-zen

I also could replicate the issue on my personal test sites as well. I've recommended the user uses the work around with custom map embedding.

[TNTPata]

I have next to zero knowledge about JS or web development, but I think I might have found the issue here.

In the code for the map block, location-search, mapkit.js, there is the following code:

// mapkit doesn't give us an id, so we'll make one containing the place name and coordinates
id: `${ value.placeName } ${ Number( value.coordinate.latitude ).toFixed( 2 ) } ${ Number(
    value.coordinate.longitude
).toFixed( 2 ) }`,

From what I've (very) quickly read about the toFixed function, whatever coordinate value is rounded to two decimals. When using coordinates, two decimals results in an accuracy of roughly 500 meters. I don't know why the coordinates are rounded to two decimals, and I guess there isn't any particular reason. Changing the rounding from 2 to 5 decimals should decrease inaccuracy to less than one meter.

Maybe @jeherve or @TimBroddin can check if this solution is viable and make a quickfix? I know that isn't the correct way to do things, but I can't be bothered testing if this works by myself and submitting a proper pull request to change two numbers.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7630601-zen
• [ ] 7741990-zen

[TimBroddin]

I have next to zero knowledge about JS or web development, but I think I might have found the issue here.

In the code for the map block, location-search, mapkit.js, there is the following code:

// mapkit doesn't give us an id, so we'll make one containing the place name and coordinates

id: `${ value.placeName } ${ Number( value.coordinate.latitude ).toFixed( 2 ) } ${ Number(

  value.coordinate.longitude

).toFixed( 2 ) }`,

From what I've (very) quickly read about the toFixed function, whatever coordinate value is rounded to two decimals. When using coordinates, two decimals results in an accuracy of roughly 500 meters. I don't know why the coordinates are rounded to two decimals, and I guess there isn't any particular reason. Changing the rounding from 2 to 5 decimals should decrease inaccuracy to less than one meter.

Maybe @jeherve or @TimBroddin can check if this solution is viable and make a quickfix? I know that isn't the correct way to do things, but I can't be bothered testing if this works by myself and submitting a proper pull request to change two numbers.

Thanks for identifying the issue. I'll take a closer look tomorrow, and will create a fix.

[TimBroddin]

Hey @tntPata,

I've looked into this closer and what's happening in the code you've mentioned is not the placement of the marker on the map. It's creating a unique identifier for this marker.

While I agree that this could also use extra specificity (500 meter is a lot) - the placement of the marker itself uses the complete data returned by Apple:

coordinates: {
    longitude: place.coordinate.longitude,
    latitude: place.coordinate.latitude,
},

I'm digging deeper into this, and looking at why Apple is returning different information here.

[zmprunella]

Adding to this report I seem to have found another user who has been impacted by this too: #7741990-zen

[TimBroddin]

This has since been fixed: https://github.com/Automattic/jetpack/pull/36634