Admin Template ma-map

[pierjsap]

<ma-map lat="-12.95" long="-38.45" zoom="12" map-type="roadmap" info-window-theme="dark" desktop-height="600px" mobile-height="450px" ng-init="myMarkers={
true: 'img/map-markers/purple-dot.png',
false: 'img/map-markers/orange-dot.png'}" output-data="myOutputData">

<marker id="marker1" position="-12.90, -38.41" icon="{url: '{{myMarkers[myPoint1.value]}}'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint1', 'marker1')"></marker>
<marker id="marker2" position="-12.95, -38.43" draggable="true" icon="{url: 'img/map-markers/green-dot.png'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint2', 'marker2')"></marker>
<marker id="marker3" position="-12.99, -38.47" draggable="true" on-click="$parent.$ctrl.toggleInfoWindow('chart1', 'marker3')"></marker>
<marker id="marker4" position="-12.92, -38.42" draggable="true" icon="{url: 'img/map-markers/yellow-dot.png'}" on-click="$parent.$ctrl.setOutputData('Demo 01-amps')"></marker>

<info-window id="setPoint2">    
    <div>
        <ma-set-point-value point="myPoint2"></ma-set-point-value>
    </div>
</info-window>
<info-window id="setPoint1">
    <div>
        <ma-set-point-value point="myPoint1"></ma-set-point-value>
    </div>
</info-window>
<info-window id="chart1">
    <div layout="row" layout-padding>
        <ma-serial-chart style="height: 150px; width: 250px" series-1-point="myPoint3" series-1-values="chart1Vals"></ma-serial-chart>
    </div>
</info-window>

</ma-map>

Hi guys, I tried to add the ma-map element to the home.html file of the admin template. But this is not displayed unlike the gauges. I added the Google API Key and within the dashboard designer it works correctly. Could you give me some indication?

[Jared Wiltshire]

@pierjsap said in Admin Template ma-map:

Hi guys, I tried to add the ma-map element to the home.html file of the admin template. But this is not displayed unlike the gauges. I added the Google API Key and within the dashboard designer it works correctly. Could you give me some indication?

I would highly recommend just using a full screen page (i.e. no menu/toolbar) inside the UI app instead of trying to use the admin template.

I suspect if you check your console you will find errors due to a missing maUiSettings service. The <ma-map> component will not work outside of the UI app. You can however use the plain <ng-map> directive, see the documentation here - https://ngmap.github.io/