This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
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
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?
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.
Ok, that's because you are not loading the October javascript framework... see here:
https://octobercms.com/docs/ajax/introduction#framework-script
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
But this is not where the js script framework needs to be included, needs to be in the body.
<html>
<head>
...
</head>
<body>
...
<script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>
{% framework %}
</body>
</html>
Last updated
or:
<html>
<head>
...
</head>
<body>
...
<script src="{{ [
'assets/javascript/jquery.js',
'@framework',
] | theme }}">
</script>
</body>
</html>
Last updated
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