Intégration mapbuildr dans page CMS

[pidev]

Bonjour à tous,

 

J'ai crée une map personnalisé sur mapbuildr (https://mapbuildr.com/buildr/otib6h) qui me génére un code JS ci dessous :

<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> 
 
<script> 
    google.maps.event.addDomListener(window, 'load', init);
    var map;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(50.662955,3.067702),
            zoom: 12,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
            },
            disableDoubleClickZoom: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: false,
            panControl: false,
            streetViewControl: false,
            draggable : true,
            overviewMapControl: false,
            overviewMapControlOptions: {
                opened: false,
            },
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            styles: [{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"color":"#f7f1df"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#d0e3b4"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"color":"#fbd3da"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#bde6ab"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffe15f"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efd151"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"black"}]},{"featureType":"transit.station.airport","elementType":"geometry.fill","stylers":[{"color":"#cfb2db"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#a2daf2"}]}],
        }
        var mapElement = document.getElementById('carte');
        var map = new google.maps.Map(mapElement, mapOptions);
        var locations = [
['Marquette-Lez-Lille, 59520', 'undefined', 'undefined', 'undefined', 'undefined', 50.674339, 3.062324, 'https://mapbuildr.com/assets/img/markers/default.png'],['Marcq-En-Barœul, 59700', 'undefined', 'undefined', 'undefined', 'undefined', 50.670368, 3.096267, 'https://mapbuildr.com/assets/img/markers/default.png'],['Wambrechies, 59118', 'undefined', 'undefined', 'undefined', 'undefined', 50.68752, 3.052377, 'https://mapbuildr.com/assets/img/markers/default.png'],['Bondues, 59910', 'undefined', 'undefined', 'undefined', 'undefined', 50.709069, 3.0996959, 'https://mapbuildr.com/assets/img/markers/default.png'],['Quesnoy-sur-Deûle, 59890', 'undefined', 'undefined', 'undefined', 'undefined', 50.714722, 3.009636, 'https://mapbuildr.com/assets/img/markers/default.png'],['Croix, 59170', 'undefined', 'undefined', 'undefined', 'undefined', 50.6758613, 3.1492001, 'https://mapbuildr.com/assets/img/markers/default.png'],['Wasquehal, 59290', 'undefined', 'undefined', 'undefined', 'undefined', 50.6763497, 3.1310386, 'https://mapbuildr.com/assets/img/markers/default.png'],['La Madeleine, 59110', 'undefined', 'undefined', 'undefined', 'undefined', 50.6572459, 3.0682755, 'https://mapbuildr.com/assets/img/markers/default.png'],['Mouvaux, 59420', 'undefined', 'undefined', 'undefined', 'undefined', 50.702318, 3.132008, 'https://mapbuildr.com/assets/img/markers/default.png'],['Saint-André, 59350', 'undefined', 'undefined', 'undefined', 'undefined', 50.6446025, 3.0576117000001, 'https://mapbuildr.com/assets/img/markers/default.png'],['Villeneuve d’ascq, 59650', 'undefined', 'undefined', 'undefined', 'undefined', 50.6316211, 3.1533357000001, 'https://mapbuildr.com/assets/img/markers/default.png']
        ];
        for (i = 0; i < locations.length; i++) {
			if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
			if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
			if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
           if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
           if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            marker = new google.maps.Marker({
                icon: markericon,
                position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                map: map,
                title: locations[i][0],
                desc: description,
                tel: telephone,
                email: email,
                web: web
            });
link = '';     }

}
</script>
<style>
    #carte {
        height:500px;
        width:900px;
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
    }
    .gm-style-iw h4, .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    .gm-style-iw a {
        color: #4272db;
    }
</style>

<div id='carte'></div>

J'aimerais l'intégré dans une de mes pages CMS de mon prestashop, pouvez vous m'aider ?

 

Merci d'avance

 

Pierre

 

 

J'aimerais le