Google Map in Banner

The ADventori DCO Enabler allows you to easily add a Google Map (static or dynamic ) inside your banner.

Before using the Google Maps service you must generate a Google Maps security key at this adress , and activate the appropriate service (static map or javascript google API).

You can read the term of use of Google Maps here .

You can’t display a map in a banner without an interaction (for example: a click) from the user inside the banner.

Static Map

The DCO Enabler lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading.

You can read the official documentation here .

First step

Install the JS and CSS of the DCO Enabler ADventori. More details here

Second Step

Declare all your HTML elements:

<div id="myAd">
    <div id="myBrand"><img src="img/300x44_YourBrand-Header.jpg"></div>
    <div id="myMap"></div>
</div>
  • #myAd : div which will contain our Ad .
  • #myBrand : div which will contain our Brand .
  • #myMap : div which will contain the Static Map.

Third step

You have to initialize your retailers feed. To test our map, you can set default values after inserting the script. These values will be automaticaly replaced with dynamic values at the time of ad serving.

In your initData, you can add dynamization variables that can be used in your banner and not in the Map.

Values found inside retailers correspond to the retailers feed which will be injected in your Map. You have to keep the same structure inside retailers.

ADventori.initData({
    text1:"Lorem ipsum", //this text is not in the retailer's feed.
    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}
    ],
});

Fourth step

Now you have to declare and initialize your static Map:

var map = new ADventori.Maps.StaticMap({
    retailers: ADventori.data.retailers,
    markeur: ADventori.data.markeur,
    mapContainer: document.getElementById('myMap'),
    size: '298x299',
    zoom: 7,
    scale: 1,
    format: 'JPEG',
    maptype: 'roadmap',
    language: 'fr',
    key: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    type: 'image',
    styles: []
});

Below are the Static Map properties:

  • retailers : lists of stores to display with name, latitude and longitude (required)
  • mapContainer : the container that will contain the map (required)
  • size : expected image size (required)
  • zoom : zoom level (optional)
  • scale : image ratio (optional)
  • format : expected image format (JPEG, GIF or PNG) (optional)
  • maptype : type of expected image (roadmap, satellite, hybrid and terrain more details here (required)
  • language : expected language (fr, en …) (optional)
  • key : google map api key (required)
  • markeur : marker url (optional)
  • type : return of the type of the image: image or background (optional)
  • styles : add styles to your map (optional)

You can customize your map.

You will find all information here .

If you want to add styles to your map, you have to put an array inside the styles property. Each value of the array is only one style declaration.

Example:

    styles:  [
        "feature:road.local|element:geometry|visibility:simplified|color:0xc280e9",
        "feature:transit.line|visibility:simplified|color:0xbababa",
        "feature:road.local|element:labels.text.stroke|visibility:on|color:0xb06eba",
        "feature:road.local|element:labels.text.fill|visibility:on|color:0xffffff"
    ]

Example

Dynamic Map

The DCO Enabler lets you customize maps with your own content and imagery for display on web pages and mobile devices.

You can read the official documentation here .

First step

Install the JS and CSS of the DCO Enabler ADventori. More details here

Install the following script inside your HTML, don’t forget to add your API key.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" ></script>

Second Step

Declare all your HTML elements:

<div id="myAd">
    <div id="myBrand"><img src="img/300x44_YourBrand-Header.jpg"></div>
    <div id="myMap"></div>
</div>
  • #myAd : div which will contain our Ad .
  • #myBrand : div which will contain our Brand .
  • #myMap : div which will contain the Dynamic Map.

Third step

You have to initialize your retailers feed. To test our map, you can set default values after inserting the script. These values will be automaticaly replaced with dynamic values at the time of ad serving.

In your initData, you can add dynamization variables that can be used in your banner and not in the Map.

Values found inside retailers correspond to the retailers feed which will be injected in your Map. You have to keep the same structure inside retailers.

ADventori.initData({
    text1:"Lorem ipsum", //this text is not in the retailer's feed.
    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}
    ],
});

Fourth step

Now you have to declare and initialize your dynamic Map:

var map = new ADventori.Maps.DynamicMap({
    mapContainer: document.getElementById('myMap'),
    retailers: ADventori.data.retailers,
    zoom: 7,
    markeur: ADventori.data.markeur, //url icon for markeur,
    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
    }
});

Below are the Dynamic Map properties:

  • retailers : lists of stores to display with name, latitude and longitude (required)
  • mapContainer : the container that will contain the map (required)
  • zoom : zoom level (optional)
  • markeur : marker url (optional)
  • options : list of options of the dynamic map more details here