Generating map on this example page:
hidden link
Map render shortcode appears to be working fine. Map marker code seems to be placing the map marker correctly. But a click on the marker does not produce the intended pop-up via the CONTENT TEMPLATE inserted in the map marker. Here is relevant code >>>
LEGACY VIEW loop code:
[wpv-layout-start]
[wpv-items-found]
[wpv-map-render map_id='map-mexico' map_height='620px' map_type_control='off' street_view_control='off' marker_icon='hidden link' marker_icon_hover='hidden link;
<!-- wpv-loop-start -->
<wpv-loop>[wpv-map-marker map_id='map-mexico' marker_id='[wpv-post-id]' marker_icon="hidden link" marker_icon_hover="hidden link" lat='[types field="location-latitude"][/types]' lon='[types field="location-longitude"][/types]'][wpv-post-body view_template="review-map-infowindow-english"][/wpv-map-marker]</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
No items found
[/wpv-no-items-found]
[wpv-layout-end]
VIEW CONTENT TEMPLATE code:
<div class="infowindow-div-1">
[wpv-post-featured-image class="aligncenter" size="custom" width="200" crop="true" item="@post_cpt-restaurants-loc.parent"]
<h6 style="color: white; line-height: 1.2em; padding: 10px;">[wpv-post-link id="$post"]</h6>
<div style="padding-bottom: 10px;">
<b>Location:</b> [wpv-post-taxonomy type="restaurant-locale" format="name"]
[types field='address_acf' output='raw'][/types]
<b>Tel:</b> [types field='phone_tstypes'][/types]
<b>Type:</b> [wpv-post-taxonomy type="restaurant-type" format="name" id="$post"]
<b>Price:</b> [wpv-post-taxonomy type="restaurant-cost" format="name" id="$post"] <b>Rating:</b> [wpv-post-taxonomy type="wp-category-restaurant-rating" format="name" id="$post"] stars
<b>Hours:</b><br/>
[types field='cfh-1' output='raw'][/types]
[types field='cfh-2' output='raw'][/types]
[types field='cfh-3' output='raw'][/types]
</div>
</div>
CSS for this template:
.infowindow-div-1 {
max-width: 300px;
background-color: black;
color: white;
text-align: center !important;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
CONSOLE errors/warnings:
js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1374 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see hidden link
****
js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1297 As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see hidden link for additional details and hidden link for the migration guide.
Hi,
Welcome top Toolset support.
I suggest that you use the shortcode generator button with Toolset logo in the classic editor that you use to add the mao and test.
I see some errors such as inconsistencies on using http and https on the links, having empty content for markers and so on.
So it is better that you create a map using the tool with a minimal setup and test. If it works ok then start adding your cusotmization.
Thanks.
Not sure what the problem was but I remedied it .. However I am getting many errors in Developer Tools when viewing Console on a page with a Toolset Map. Specifically, the following:
js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1374 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see hidden link
... and
es/:227 Note: MonsterInsights does not track you as a logged-in site administrator to prevent site owners from accidentally skewing their own Google Analytics data.
If you are testing Google Analytics code, please do so either logged out or in the private browsing/incognito mode of your web browser.
jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
es/:2357 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
at updateAdsCount (es/:2357:20)
at es/:2182:5
at es/:2370:6
js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1374 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see hidden link
Zca @ js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1374
js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1297 As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see hidden link for additional details and hidden link for the migration guide.
_.ho @ js?libraries=places&v=3&callback=Function.prototype&key=AIzaSyCXbfBxucRt1JBeA6VRW2Zt3ZeOZ7C7fes:1297
...
WHY ARE THESE ERRORS appearing? Doesn't this relate to how the marker shortcode has been written?
Hi,
Thanks for the detailed console log. Here’s what each message means and whether it’s related to your Toolset marker shortcode:
1. “Google Maps JavaScript API has been loaded directly without loading=async …”
This is a performance warning from Google about how the script tag is loaded. It’s not a functional error and it’s not caused by your [wpv-map-marker] shortcode. It just means the Maps script is being inserted without async/defer.
2. “As of Feb 21, 2024, google.maps.Marker is deprecated. Use AdvancedMarkerElement.”
Also not your shortcode. It’s a Google API deprecation notice. Toolset Maps (and most map plugins) still use the legacy Marker class. The API continues to work; Google is nudging developers toward AdvancedMarkerElement. Nothing you need to change in your shortcode;
3. MonsterInsights “you’re logged in; tracking disabled” note
Informational only, not an error, not related to Maps. It appears for admins.
4. “JQMIGRATE: Migrate is installed, version 3.4.1”
Informational (jQuery Migrate present). Not related to Maps or Toolset.
5. Uncaught TypeError: Cannot read properties of null (reading 'querySelector') at updateAdsCount
This points to a theme/ads script on the page (note the path es/:2357). It’s trying to query an element that doesn’t exist. Again, unrelated to the Toolset Maps shortcodes.
Thanks.
