Difficulty in adding Google Maps in Ionic

ionic-v1
1

I am trying to load maps for each list item in a new page.
But it is working (sometimes on web browsers but not at all in Android emulator).

Please help me on this

........... <script type="text/ng-template" Incident Map 
          <div id="map" ng-controller="MapCtrl">

            </div>


        </ion-content>
    </ion-view>
</script>

app.js:

.controller(‘MapCtrl’,function($scope,sharedProp){
google.maps.event.addDomListener(window, ‘load’, function() {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                title: "My Location"
            });
        });

        $scope.map = map;
    });
2

What errors show up in the logs?

3

No error been showed up in particular to elements involved or with the API call itself.

image
image.png1302×801 120 KB

4

I’m not familiar with Ripple, but you should really build and install rather than live reload.

Best way to test anything is to test it as if it were for real.

5

I have emulated in android sdk emulator and even tried with my mobile. No luck :?

image
image.png1283×806 96.8 KB

6

I just found out that instead of traditional initialize() with addDomListener event one can replace $scope.init() and use data-ng-init="init() next to the controller you declared in HTML.

Refer to Stack Overflow URL: