Integrate mapbox map
-
wrote on Apr 1, 2023, 2:48 PM last edited by Walker Apr 1, 2023, 10:48 AM
Hi there,
I want to integrate a mapbox map into a page.I have tried a lot but I can't get it done.
Here is the way I tried to do it.
(here is also a simple instruction from mapbox: https://www.mapbox.com/install/javascript/cdn-install/ )In the custom head area I copied this:
<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' /> <script> mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' }); </script>In the specific page where the map should show up, I inserted a html with the following:
<div id='map' style='width: 400px; height: 300px;'></div>Thats it, but nothing will appear on the site.
––––
When I insert the Div into the custom head area it works, but then the map is globaly on every page.I think this should be not too complicated.
If anybody can help I would be very happy.Thanks
-
Global Moderatorwrote on Apr 2, 2023, 2:27 PM last edited by arminunruh Apr 2, 2023, 10:27 AM
insert this:
<script> mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' }); </script>into "html at bottom"
-
insert this:
<script> mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' }); </script>into "html at bottom"
wrote on Apr 3, 2023, 8:02 AM last edited byHi @arminunruh,
thanks for the answer.I changed the code, but didn't work.
I have the feeling the problem is the div which I insert into the certain page. Here is a picture how I did it.
The interesting part is, when I put all the code I posted above into the custom head area (also the "div id=map ...") then the map appears. But on every page and always ...
-
Global Moderatorwrote on Apr 3, 2023, 10:00 AM last edited by arminunruh Apr 3, 2023, 6:00 AM
well the div markup is wrong too
<div id="map"></div>
u're missing a >
why don't u try and do it exactly like they did in the tutorial?
they didnt put all of the javascript in the <head>.they put part of it after the <div id="map"></div>
if u do so make sure to activate compatibility mode in lay options (all the way at the bottom)
-
well the div markup is wrong too
<div id="map"></div>
u're missing a >
why don't u try and do it exactly like they did in the tutorial?
they didnt put all of the javascript in the <head>.they put part of it after the <div id="map"></div>
if u do so make sure to activate compatibility mode in lay options (all the way at the bottom)
wrote on Apr 3, 2023, 12:22 PM last edited byThanks a lot for you time!
Now it works. 😘
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it