<script type="text/javascript" src="//adventori.com/lp/enabler/ADventori-2.0.0.js"></script>
<link rel="stylesheet" type="text/css" href="//adventori.com/lp/enabler/ADventori-2.0.0.css">
<!--CALL GOOGLEMAP URL WITH YOUR APIKEY IN PARAMATER-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVuhqAyvdhLees6c4bI5OKfqStATPcs7c" ></script>

<div id="ADventori_myAd">
    <div id="ADventori_AdTop" onclick="ADventori.click(event, ADventori.data.url)">
        <div id="ADventori_Video"></div>
    </div>
    <div id="ADventori_StoreLocator">
        <div id="ADventori_map">
        </div>
        <div id="ADventori_overlay">
        </div>
    </div>
</div>




#ADventori_myAd{
  width: 300px;
  height: 600px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
  cursor:pointer;
  margin: 0 auto;
}
#ADventori_AdTop{
  height: 50%;
  position: relative;
}

#ADventori_StoreLocator{
  height: 50%;
    background-color:#EAEAEA;
    background-image:url(http://adventori.com/lp/enabler/templates/Wall_CreaV2/map/html5/static/img/loading.gif);
    background-repeat:no-repeat;
    background-position:center center;
    position: relative;
  display:block;
} 

#ADventori_map{
  height: 100%;
  border : solid 1px green;
}

#ADventori_overlay {
  height: 100%;
  width: 95%;
  background-color: #CDDAD3;
  opacity : 1;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  text-align: center;
  display: block;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 25px;
  padding-right:3%;
  padding-left:3%;
}

#map {
  height: 100%;
}



ADventori.initData({
        url: 'https://adventori.com',
        image: "https://adventori.com/lp/enabler/templates/Wall_CreaV2/map/html5/static/img/yourbrand.jpg",
    retailers :[
             {name:'PARIS',gmLatitude: 48.856614 , gmLongitude:2.3522219000000177} ,
              {name:'Clichy',gmLatitude: 48.9, gmLongitude : 2.3},
              {name:'Orléans',gmLatitude: 47.9028900, gmLongitude : 1.9038900}
    ],
        overlay: "3 stores near you, click here to discover them",
});

document.getElementById('ADventori_AdTop').setAttribute("style", "background:url(" + ADventori.data.image + ") center center no-repeat;background-size:contain;");
if (ADventori.data.overlay) {
    var overlay = document.getElementById('ADventori_overlay');
    ADventori.Display.setText(overlay, ADventori.data.overlay);
    ADventori.Display.verticalAlign(overlay);
}
document.getElementById('ADventori_StoreLocator').addEventListener("click",addDynamicMap);
function addDynamicMap(){
    overlay.style.display = 'none';
    var map = new ADventori.Maps.DynamicMap({
        mapContainer: document.getElementById('ADventori_map'),
        retailers: ADventori.data.retailers,
        zoom: 7,
        markeur: 'http://adventori.com/lp/enabler/templates/Wall_CreaV2/map/html5/static/img/pin.png',
        //google map options are avaible link bellow
        //https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=fr#MapOptions
        options: {
            zoomControl: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                mapTypeIds: ['roadmap', 'terrain', 'satellite', 'hybrid']
            },
            scaleControl: true,
            streetViewControl: true,
            rotateControl: true,
            fullscreenControl: true,
            styles: [
              {"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},
              {"featureType":"administrative","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#5b6571"}]},
              {"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},
              {"featureType":"landscape","elementType":"all","stylers":[{"visibility":"on"},{"color":"#f3f4f4"}]},
              {"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"weight":0.9},{"visibility":"off"}]},
              {"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#55d5be"}]},
              {"featureType":"road","elementType":"all","stylers":[{"visibility":"on"},{"color":"#e2d85f"}]},
              {"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"},{"color":"#fff3c5"}]},
              {"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},
              {"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},
              {"featureType":"road.highway","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
              {"featureType":"road.highway.controlled_access","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
              {"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#ffffff"}]},
              {"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"on"}]},
              {"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
              {"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#5b6571"}]},
              {"featureType":"road.local","elementType":"geometry.fill","stylers": [{"visibility":"on"},{"color":"#fff3c5"}]},
              {"featureType":"road.local","elementType":"geometry.stroke","stylers": [{"visibility":"off"}]},
              {"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#5b6571"}]},
              {"featureType":"road.local","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},
              {"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#6cb1d0"}]}
            ]
        }
    });
    document.getElementById("ADventori_StoreLocator").removeEventListener("click", addDynamicMap);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.