simplemap
simplemap copied to clipboard
ethercreative
Leaflet Map not rendering
Description
Using Maps Pro 3.7.5 in Craft CMS 3.3.18.1 some addresses in the "Full Address" field do not generate a Leaflet map. We've investigated and confirmed that the addresses are correct. There is no odd formatting in the addresses. Some times they work and a map is generated and displayed other times a gray box is shown where the map should be. Inspecting the page shows a "Uncaught TypeError: Cannot read property 'lat' of null" and "Uncaught TypeError: Cannot read property 'x' of undefined" in console.
When this happens and you check the entry, the "Full Address" field is empty.
Can you enable the latutude / longitude fields on the map field and let me know if they have any data in them? You can enable the fields by going to your map fields settings and checking the Show Latitude / Longitude option.
Hi Tam - I've enabled the latitude / longitude field and there is data in them but the map is still showing as a gray box on the front end.
{% extends "_layout" %}
{% set entries = craft.entries.section('directory').all() %}
{% block content %}
<main>
<div class="page-content">
<p><a class="breadcrumb" href="/directory"><i class="fas fa-long-arrow-alt-left"></i> Back to Members</a></p>
<div class="member-profile-wrapper">
<div class="member-profile-primary">
<h1 class="member-profile-heading">{{ entry.title }}</h1>
<ul class="member-profile-contact">
{% if entry.map.address|length %}<li><i class="fas fa-map-marker"></i> <a href="http://maps.google.com/?q={{ entry.map.address }}" target="_blank">{{ entry.map.address }}</a></li>{% endif %}
{% if entry.phone|length %}<li><i class="fas fa-phone"></i> <strong>Phone:</strong> <a href="tel:{{ entry.phone }}">{{ entry.phone }}</a></li>{% endif %}
{% if entry.hours|length %}<li><i class="fas fa-clock"></i> <strong>Hours:</strong> {{ entry.hours }}</li>{% endif %}
{% if entry.website|length %}<li><i class="fas fa-laptop"></i> <strong>Website:</strong> <a href="{{ entry.website|raw }}" target="_blank">{{ entry.website|raw }}</a></li>{% endif %}
</ul>
{{ entry.body }}
<ul class="member-profile-social">
{% if entry.facebookProfile|length %}<li><a href="{{ entry.facebookProfile|raw }}" target="_blank"><img src="{{ siteUrl }}assets/img/icon-social-facebook.svg"><span class="sr-only">facebook</span></a></li>{% endif %}
{% if entry.twitterProfile|length %}<li><a href="{{ entry.twitterProfile|raw }}" target="_blank"><img src="{{ siteUrl }}assets/img/icon-social-twitter.svg"><span class="sr-only">twitter</span></a></li>{% endif %}
{% if entry.linkedinProfile|length %}<li><a href="{{ entry.linkedinProfile|raw }}" target="_blank"><img src="{{ siteUrl }}assets/img/icon-social-linkedin.svg"><span class="sr-only">linkedin</span></a></li>{% endif %}
{% if entry.youtubeProfile|length %}<li><a href="{{ entry.youtubeProfile|raw }}" target="_blank"><img src="{{ siteUrl }}assets/img/icon-social-youtube.svg"><span class="sr-only">youtube</span></a></li>{% endif %}
{% if entry.instagramProfile|length %}<li><a href="{{ entry.instagramProfile|raw }}" target="_blank"><img src="{{ siteUrl }}assets/img/icon-social-instagram.svg"><span class="sr-only">instagram</span></a></li>{% endif %}
</ul>
</div>
<div class="member-profile-secondary">
{% if entry.logo|length %}
<div class="member-profile-logo">
{% if entry.website|length %}
<a href="{{ entry.website|raw }}" target="_blank"><img src="{{ entry.logo.one().getUrl('memberLogo') }}" alt="{{ entry.title }}"></a>
{% else %}
<img src="{{ entry.logo.one().getUrl('memberLogo') }}" alt="{{ entry.title }}">
{% endif %}
</div>
{% endif %}
{% if entry.map.address|length %}
<style>#map{ width:300px; height:300px; }</style>
{{ entry.map.embed({
id: 'map',
class: 'map',
markers: [{}],
}) }}
{% endif %}
</div>
</div>
</div>
{% set photos = entry.gallery.all() %}
{% if photos|length %}
<div class="about-carousel-wrapper">
<div class="about-carousel">
{% for image in photos %}
<img src="{{ image.url('gallery') }}" alt="{{ image.filename }}">
{% endfor %}
</div>
<div class="about-carousel-arrow-wrapper">
<div class="about-carousel-arrows"></div>
</div>
</div>
{% endif %}
</main>
{% endblock %}
@Tam You I can create a user for you so that you can login and see the configuration if that is helpful. Message me and I'll set it up.
@antistatic for now a link to the page that's erroring would be good. You can email it to [email protected] if you don't want it public!
It looks like it's failing to the lat/lng for that entry. Can you try clearing the map, saving the entry, then re-entering the address?
@Tam Just tested this and it didn't work. Looks like it is keeping the lat/lng in there somehow
Sent. Let me know if there is anything else that would be helpful in troubleshooting this
That map is rendering correctly for me. Do you have any template caching that could be interfering with it?
Looking at the link you sent me, the map appears to be rendering correctly. Perhaps it was Crafts built-in template caching causing issues?
I was just testing that one. I removed all the field content, saved, re-entered the data in the full address field and saved. It fixed this one, but about half of those directory entires are experiencing the same problem. I was able to fix a couple of them but not the rest.