This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

  1. Forum
  2. FormTools Support
  3. MapMarkers plugin doesn't display anything
bart57983
bart57983

Hi, I installed Grakers MapMarkers plugin. I filled in Googles API key and i created two markers with just a title, longitude and latitude. In backend the map is displayed correctly. I added the mapMarkers component to a CMS page ({% component 'mapMarker' % }). I did not add the Map List component as i don't need it. When i preview the page i get an empty page. When i add a paragraph above the mapMarker component with some text in it, on preview the text is displayed but not the map. What am i missing? Thanks in advance! PS: when i 'inspect' the area in Firefox i can see <div class="mapcontainer"><div id="mapcomponent"></div></div> without any content.

Bart Devos

mjauvin
mjauvin

It looks like the JavaScript is not executing, as this is what is inserting the map object into the container... do you get any JavaScript errors in Firefox debug console?

bart57983
bart57983

Dear mjauvin, Thanks for your response. Indeed i get an error in the console: <pre><code>Uncaught (in promise) TypeError: $(...).request is not a function mapComponentInit http://localhost/plugins/graker/mapmarkers/assets/js/mapmarkers_map.js:9 Wj https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:144 Xj https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:144 promise callback*Xj https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:144 Load https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:14 <anonymous> https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:259 <anonymous> https://maps.googleapis.com/maps/api/js?key=<MY_GOOGLE_API_KEY>&callback=mapComponentInit:259 mapmarkers_map.js:9:11</code></pre>

I don't suspect my Google api code as invalid because the map is displayed in the backend.

mjauvin
mjauvin

Ok, that's because you are not loading the October javascript framework... see here:

https://octobercms.com/docs/ajax/introduction#framework-script

bart57983
bart57983

Hmmm, still not working. I uploaded jquery-3.5.1.min.js into the assets/javascript folder of my theme and renamed it to jquery.js My layout shows as follows:

<html lang="nl" xml:lang="nl">

<head> ... <script src="{{ 'assets/javascript/jquery.js'|theme }}"></script> {% framework %} </head> <body>...</body>

My page where the map should appear: <p>test</p> {% component 'markersMap' %}

But still no success. Sorry, i'm new to October cms, Laravel, php. I'm a java programmer...

Last updated

mjauvin
mjauvin

show your full layout file, and use "```" to open/close the code block

mjauvin
mjauvin

But this is not where the js script framework needs to be included, needs to be in the body.

mjauvin
mjauvin 
<html> 
    <head> 
...
    </head>

    <body>
...

        <script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>
        {% framework %}
    </body>
</html>

Last updated

mjauvin
mjauvin

or:

<html>
    <head>
... 
    </head>

    <body>
...

        <script src="{{ [ 
                'assets/javascript/jquery.js',
                '@framework',
                ] | theme }}">
        </script>
    </body>
</html>

Last updated

bart57983
bart57983

I tried it first to put it into the body. That didn't work. Then i putted it into the header, without success. Now i realized that there was a link in the body with the slim version of jquery. I commented that out and re-pasted the full jquery link into the body. Now it works like a charm! Thank you very much for your help mjauvin!

Bart Devos

1-10 of 10

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.