I’ve installed the latest version (2.0.1) but am getting the following error in the editor:
Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: withGoogleMap(Component)And I’m unable to add any locations/markers.
]]>When an SVG marker icon is used, the block doesn’t load anymore in Gutenberg editor:
Block validation: Block validation failed for cgb/block-gosign-googlemaps (
Content generated by save function:
`
<div class="gosign-googlemaps" style="min-height:350px" data-lat="<redacted>" data-lng="<redacted>" data-zoom="17" data-show-zoom-buttons="true" data-show-map-type-buttons="true" data-show-street-view-button="true" data-show-fullscreen-button="true" data-option-scroll-wheel="true" data-option-draggable="true" data-styles="[{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]" data-gesture-handling="cooperative"><div class="gosign-googlemaps-marker" data-lat="<redacted>" data-lng="<redacted>" data-address="<redacted>" data-iconurl="https://<redacted>/app/uploads/2022/01/Icon.min_.svg" data-markerwidth="27"></div></div>
Content retrieved from post body:
<pre><code><div class="gosign-googlemaps" style="min-height:350px" data-lat="<redacted>" data-lng="<redacted>" data-zoom="17" data-show-zoom-buttons="true" data-show-map-type-buttons="true" data-show-street-view-button="true" data-show-fullscreen-button="true" data-option-scroll-wheel="true" data-option-draggable="true" data-styles="[{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]" data-gesture-handling="cooperative"><div class="gosign-googlemaps-marker" data-lat="<redacted>" data-lng="<redacted>" data-address="<redacted>" data-iconurl="https://<redacted>/app/uploads/2022/01/Icon.min_.svg" data-markerwidth="27" data-markerheight="NaN"></div></div>
`
The height of the marker icon is NaN in the markup to save, while it is not in the post markup. So some value is not passed around correctly.
The maps block stylesheet has a reference to /assets/images/google-maps-marker.svg which is not found. The URL seems incorrect, it should point to an image provided by the plugin.
On frontend a JavaScript warning is logged per maps block:
`js?v=3.exp&language=de&key=[...]:67 InvalidValueError: setIcon: not a string; and not an instance of PinView; and no url property; and no path property _.fe @ js?v=3.exp&language=de&key=[...]:67 _.ie @ js?v=3.exp&language=de&key=[...]:68 (anonymous) @ js?v=3.exp&language=de&key=[...]:90 _.M.setValues @ js?v=3.exp&language=de&key=[...]:214 sg @ js?v=3.exp&language=de&key=[...]:95 _.Ug @ js?v=3.exp&language=de&key=[...]:101 j.createMarker @ gmaps.min.js?ver=0.4.25:1 j.addMarker @ gmaps.min.js?ver=0.4.25:1 (anonymous) @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 h @ script.min.js?ver=5.7:12 u.onload.u.onerror.u.<computed> @ script.min.js?ver=5.7:12 load (async) v @ script.min.js?ver=5.7:12 e @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 d @ script.min.js?ver=5.7:12 p @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 setTimeout (async) g @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 h @ script.min.js?ver=5.7:12 u.onload.u.onerror.u.<computed> @ script.min.js?ver=5.7:12 load (async) v @ script.min.js?ver=5.7:12 e @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 d @ script.min.js?ver=5.7:12 p @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 setTimeout (async) g @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 each @ jquery.js?ver=3.5.1:381 each @ jquery.js?ver=3.5.1:203 value @ script.min.js?ver=5.7:12 value @ script.min.js?ver=5.7:12 (anonymous) @ script.min.js?ver=5.7:12 requestAnimationFrame (async) (anonymous) @ script.min.js?ver=5.7:12 f @ script.min.js?ver=5.7:12 u @ script.min.js?ver=5.7:12 js?v=3.exp&language=de&key=[...]:67 InvalidValueError: setIcon: not a string; and not an instance of PinView; and no url property; and no path property
`
The map blocks still appear to work properly, but the warning indicates that a variable is not checked in the block script. ]]>
![https://<redacted>/app/uploads/2022/01/Icon.min_.svg"](https://<redacted>/app/uploads/2022/01/Icon.min_.svg"){kind=link}