The map component is called ViaMichelin.Api.Map. It works with VMLaunch method which takes 2 further parameters : conf and callbacks.

conf : configuration of the component 
callbacks : event listeners of the component

                VMLaunch("ViaMichelin.Api.Map", conf, callbacks);         


(string|object) center

                    This parameter is used to specify the central point of the map.

                     It can contain geographic coordinates or a constant.

Coordinates example : 

{coords : { lon : 5.6, lat : 45.23}} 

Example of constant : 

 ViaMichelin.Api.Constants.Map.FROM_GEOLOCATION : uses the navigator functionality to locate the user 
 ViaMichelin.Api.Constants.Map.DELAY_LOADING : delays the display of the map to let the route appear, for example.

(object) geoConstraints

                Allows to restrict the navigation and the zoom levels 

(object) geoConstraints.bounds

                Indicates a limit area within the user can be browse
                The area stands from the north-east corner to the south-west corner of the map (Cette zone est définie par 2 points correspondant aux coins nord-est et sud-ouest de la carte affichée.)

Example : 
conf.geoConstraints.bounds = {ne : {lon : -0.97, lat : 49.1}, sw : {lon : -5.1, lat : 47}}

(number) geoConstraints.zoom.min

                Indicates the minimum value that can take the level zoom

(number) geoConstraints.zoom.max

                Indicates the maximum value that can take the level zoom.

(boolean) geolocationControl

                Allows to display a button which centres the map according to the user position (based upon)
                By default : false

(boolean) mapMenuControl

                 Indicates if the menus are displayed. It allows to carry out an global control of the menus.

                 Note : This option concerns only the menus which can be taken with option. It doesn't concern the

                zoom button(Cela ne concerne que les menus en option et non la barre de zoom.) 
                 By default : true


               Allows to choose the position of the menus : at the right side or the left side.

               By default : "left"

(boolean) mapToolsControl

               Indicates if the tools map are displayed.
               By default : true


              Allows to align the map tools on the right side or the left side of the map

              By default : "left"

(boolean) mapTypeControl

              Allows to display the proper selection menu according to the type of map selected

              The menu  allows you to toggle between the ROADMAP and LIGHT.
              By default : false

(object) mapTypeControlOptions

              Options on the type map. 

(string) mapTypeControlOptions.type

              Indicates the map type to display.

              This parameter is independent of the display of the selection  menu of the type.

              It is quite possible to display the menu and choose another type of map than the one set by default.

The kind of the map is specified by a constant. The different possible values :





Only available with zoom >19 on nearly 1000 urban areas. In this view, the traffic information and the POI of services are not visible.




Empty map


Map with a clear view with a light graphism, ideal for mobile phones and digital tablets.(Cartographie allégée idéale pour les supports mobiles et tablettes)


By default, the set value is ViaMichelin.Api.Constants.Map.TYPE.ROADMAP

(boolean) markerControl

                 Indicates if the sight have to be indicated on the map (Indique si la mire doit être présente sur la carte.) 
                  By default : false

(boolean) menuPoiControl

                 Indicates if the selection menu of POD is displayed (gas station, schools, etc). 
                 Note : If the skin parameter is specified and different from the default one, you must set settingByOverlay to true to get the menu. 
                  By default : false

(string) navigationControlOptions.type

               It allows to choose the size of the tools buttons of the map.

               2 values are available :



It displays the tools in a standard format


It displays the tools in a smaller format

By default : ViaMichelin.Api.Constants.Map.NAVIGATION.CONTROL.DEFAULT

(string) navigationMode

               Defines the navigation mode. It takes the following values :



The map is not movable with the computer mouse


The map is movable with the computer mouse



The map is not movable with the computer mouse, but the zoom which selects areas works.

By default : ViaMichelin.Api.Constants.Map.NAVIGATION.DRAG

(boolean) scrollwheel

                   Allows to activate or deactivate the use of the scroll wheel to regulate the zoom
                   By default : true

(boolean) situationMapControl

                   Allows to display a mini map on the map which shows the position with more distance

                  (perspective view).

                  By default : false

(number) tileOpacity

                  Allows to modify the level of opacity of the tiles of the map. 
                  It is a number between 0 and 1. 
                  By default : 1.0

(boolean) traffic

                  Allows to activate the display of the traffic map.Permet d'activer l'affichage du trafic sur la carte. 
                  By default : false

(object) trafficOptions

                 Allows to configurate the display of the traffic.


                 Allows to display or hide the traffic menu.
                 By default : true

(boolean) trafficOptions.boxLegend

                  Allows to display or hide the legend traffic.
                  By default : true

(number) zoom

                 It designates the initial level of the zoom of the map displayed
                 It is an integer between 1 and 19, 1 represents the largest level.

                  By default : 4

The weather

To implement the weather option on your website, the following options are available.

(boolean) weatherControl

                  Allows to display the control button of the weather
                  By default : false

(string) weatherControlOptions.mode

                  Specifies the behavior when no station is detected.
                  It can take 2 values :



It displays a directional indicator towards the closest station


It duplicates the marker of the closest station in the center to the map

By default : ViaMichelin.Api.Constants.Weather.POSITION_MODE.TRACKER

(boolean) weatherControlOptions.withBubble

                  It indicates if a click on the markers presents the weather forecasts in a bubble. 
                  By default : true

The mobile parameters.

The following parameters are used for displays on the mobile phones.

(string) skin

               It indicates the topic to be applied to graphic controls of map. 
               It must be chosen according to the resolution of screen of the final support (smartphone, numeric tablet). 

skin can take the following values :






By default :  ViaMichelin.Api.Constants.Map.SKIN.DEFAULT

(boolean) settingByOverlay

It places controls of map in a modal dialog box being displayed in overlay on the map. That makes it possible not to overload the control chart on the mobile platforms. This parameter must be used jointly with skin. 

By default: false


The methods make it possible to change the map  once loaded. Before  calling the methods of the map, it is necessary to obtain its instance. As any component of API ViaMichelin, you can get the instance of the component by listening to the onInit event.The first argument received by your callback will be the instance of the component.

(Geopoint) getCenter ()

                    It returns the geographic coordinates on the center of the map.(de la carte courante)

(number) getZoomLevel ()

                    It returns the level of the zoom. (de la carte courante)

(number) getZoomConfig ()

                   It returns the level the level of initial zoom at the loading of the map.

(string) getMapId ()

                   It provides the owner's id of  ViaMichelin (called MapId). Refer to ViaMichelin REST API documentation.

(Geopoint) getNorthWest ()

(Geopoint) getNorthEast () 

(Geopoint) getSouthWest () 

(Geopoint) getSouthEast ()

It provides the geographic coordinates of the four corners of the cardinal points.

(string) getMapType ()

                It returns the type of the current map. The values are available with the mapTypeControlOptions of the configuration.

(string) drawMap (center, zoom)

                 It displays a map centered on the geographic coordinates specified, with a zoom level.

center est du même type que la propriété du même nom de la configuration.

object) center

 The center of the map. To get details about the possible values,  refer to the property "center" on the configuration.

(number) zoom

 The level of zoom.

(null) mapZoomIn ()

                  It activates the zoom on the current map and increases the scale.

(null) mapZoomOut ()

                  It decreases the zoom on the current map and decreases the scale.

                  It changes the zoom level of the current map.

(number) zoom

 The zoom level.


(null) moveEast ()

(null) moveNorth () 

(null) moveSouth () 

(null) moveWest ()

Those options allow to move the map to the directions desired. 


(null) moveTo (coords) 

(null) panTo (coords)

           It refocuses the current map with the datas provided. The transition is slower with panTo().

(Geopoint) coords

 Le niveau de zoom.

(null) resizeTo (size)

           It resizes the current map.

(null) refresh ()

           It updates the map content. Useful for traffic datas. 

(number) getTileOpacity ()

           It returns the opacity of the current base map. 

(null) setTileOpacity (opacity)

           It changes the opacity of the current base map.

(null) setLightsOff (flag, options)

           It activates or deactivates the masking of the page background to make the map more visible. The background takes the color and opacity desired (by default #000 et 0.8) .

(boolean) flag

The true value activates the masking.

(object) options

 The masking options are in the following form :

{color: string, opacity: number}

{color: string, opacity: float}

(null) setMapFullscreen (flag)

            It activates or desactivate the full screen mode of the map.

(boolean) flag

 The value "true" puts the map to the full screen mode.