Insert Mapbox in a Contact page…

Hey Paolo,

Thank you for the inquiry.

Do they provide an embed script or an iframe code? You should be able to insert the embed script in a text or code block element in the advance layout builder.

Best regards,
Ismael

Hi,
Thank you for your patience, and the link to your MapBox install instructions, first I would recommend using the Enfold Child Theme so you don’t lose the changes when you update the theme.
Then add this code to the end of your functions.php file in Appearance > Editor:

function install_mapbox(){
    ?>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
    <?php
    }
add_action('wp_head', 'install_mapbox');

then add this to a code block on your page:

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>

you will need to add your access token to replace this part of the code: YOUR_MAPBOX_ACCESS_TOKEN
Then the default map will show:

Then you should go to this page to learn how to customize your MapBox map.

If you can’t create a free “Google Maps API” then you can’t use the Google Maps element, unfortunately we currently don’t have a MapBox element.

Best regards,
Mike