How to handle $scope.map with multiple maps ?

[estellederrien]

Hello,

I have 2 maps on my screen.

on-mouseover="myFunction(event,pin.id)" works on one , but I cannot use on-mouseover on the second map at the same time .

Then i cannot see info-window on the second map, i don't understand why.

I have this error on the second map 👍 TypeError: a is undefined

How could I handle $scope.map for both maps to show info-windows ?

I've tried to give a different ID to both maps, then I do that 👍

 NgMap.getMap({id:'jo'}).then(function(map) {

        map.setZoom(5);
        $scope.map = map;
        $scope.$apply();

      }); 

    NgMap.getMap({id:'ver'}).then(function(map) {

        map.setZoom(5);
        $scope.map = map;
        $scope.$apply();

      }); 

But it can't work, because only the last $scope.map is kept .

Markers are nicely appearing on both maps, but info-windows can't be called on the second one Thank you!

[estellederrien]

EDIT ! FInnally just resolved my thing and found a way to display 2 maps with 2 infos window !

THis is the code i 've now in my controller 👍

`NgMap.getMap({id:'jo'}).then(function(map) {

        map.setZoom(5);
        $scope.map1 = map;
        $scope.$apply();

      }); 

    NgMap.getMap({id:'ver'}).then(function(map) {

        map.setZoom(5);
        $scope.map2 = map;
        $scope.$apply();

      }); `

Then, After i call each functions like that in my controller 👍

$scope.showStore = function(evt, pinId) {
          console.log('mouseover');
        console.log(evt);
        console.log(pinId);
        $scope.map1.showInfoWindow('foo10', this);
        $scope.temp = pinId;

      };

        $scope.showJuriste = function(evt, pinId) {
          console.log('mouseover');
        console.log(evt);
        console.log(pinId);
        $scope.map2.showInfoWindow('foo20', this);
        $scope.temp = pinId;

      };

Then, there are no problems no more.

This is the HTML :

<ng-map id="jo"  center="48.8,2.3" zoom="5"   style="height: 500px;width:100%; display:block; "><!-- on-click="pinClicked(this)" on-mouseover="mouseover()" -->
    <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}" icon="{{rdvIcon}}"  on-mouseover="showStore(event,pin.id)" on-click="pinClicked(this)"></marker>
      <info-window id="foo10" max-width="200">
        <div >
          <div id="siteNotice"></div>
          <h1 id="firstHeading" class="firstHeading">Rendez-Vous</h1>
          <div id="bodyContent">
            <p>
            <b>Rendez-Vous Id </b>{{temp}}
            </p>
            <p>Attribution: Uluru,
            <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
              http://en.wikipedia.org/w/index.php?title=Uluru
            </a>
            (last visited June 22, 2009).</p>
          </div>
        </div>
      </info-window>
      </ng-map>

      <ng-map id="ver" center="48.8,2.3" zoom="5"   style="height: 500px;width:100%; display:block; ">
    <marker ng-repeat="p in markersJuristes" position="{{p.latitude}},{{p.longitude}}" title="{{p.nom}}" icon="{{juristesIcon}}" on-mouseover="showJuriste(event,p.id)"></marker>
     <info-window id="foo20" max-width="200">
            <div >
              <div id="siteNotice"></div>
              <h1 id="firstHeading" class="firstHeading">Juriste</h1>
              <div id="bodyContent">
                <p>
                <b>Rendez-Vous Id </b>{{temp}}
                </p>
                <p>Attribution: Uluru,
                <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
                  http://en.wikipedia.org/w/index.php?title=Uluru
                </a>
                (last visited June 22, 2009).</p>
              </div>
            </div>
          </info-window>
      </ng-map> 

Thanks a lot !