CODEWITHSUNDEEP
angularjscordovaionic-framework
saifaldeen
saifaldeen

Reputation: 173

initMap is not a function in google map api with angularjs

I am trying to display Google map inside the home page using Ionic/angularjs

I get this error

initMap is not a function

Here's the code

var app = angular.module('starter', ['ionic']);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})




app.controller('homeController', function ($ionicPlatform)
{

    $ionicPlatform.ready(function ()
    {

        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    
    })


})
 <body ng-app="starter" ng-controller="homeController">

      <h3>My Google Maps Demo</h3>
      <div id="map"></div>


      <script async defer
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBscOlAy5I1y_LQfnHYxPafZi5Lo0QoK9I&callback=initMap">
      </script>
  
  </body>

Note: it works without using a controller , But i need to display it using controller . Could you know what is the problem ?

Upvotes: 0

Views: 1989

Answers (1)

Akshay
Akshay

Reputation: 805

not familiar with angular but this may work

**remove callback from script**
<script async defer
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBscOlAy5I1y_LQfnHYxPafZi5Lo0QoK9I">
      </script>

now call the function from the controller

app.controller('homeController', function ($ionicPlatform)
{

    $ionicPlatform.ready(function ()
    {

        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }

initMap();

    })


})

Upvotes: 1

Related Questions