Google maps not showing

i'm trying to include google maps in my hybrid app,and i'm coming across a problem where the function is running but the google map is not getting shown.

search.html this is the page where the map is to be shown, here the share location option come up but after sharing too,it doesn't show the page

<style>
#map {
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}   
</style>
<ion-view title="Map">
  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
   <ion-content >
        <div id="map" data-tap-disabled="true"></div>
   </ion-content>
<ion-view>

index.html

<html>
  <head >
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/flaticon/flaticon.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/app.css">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/datepicker.js"></script>
    <script src="//maps.googleapis.com/maps/api/js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>


  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

app.js this is the main js file where the states are defined and i don't think i have done any mistake here

angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/connect",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html",
        controller: 'GpsCtrl'
      }
    }
  });
$urlRouterProvider.otherwise('/app/main');
});

controllers.js here is the controller part defined , the GpsCtrl is for the map. the page is getting opened and asking for location permissions on browser but then it is not showing the map

angular.module('starter.controllers', ['angular-datepicker'])
.controller('MainCtrl', function($scope) {

})
.controller('GpsCtrl', function($scope) {

    ionic.Platform.ready(function() {
        var myLatlng = new google.maps.LatLng(12.96,77.65);

        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;
    });

});

menu.html this is the file for the sidemenu

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/connect">
          Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/registration">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/main">
          Main
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/resu">
          Result
        </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

回答1:

you are missing the http:// in the google maps call.

call it like this:

<script src="http://maps.googleapis.com/maps/api/js"></script>

回答2:

did you check the run method in app.js. Make sure you have starter.controllers as dependency stated there..

angular.module('starter',['ionic','starter.controllers'])  <== add controller here
.run(function($ionicPlatform) {......................

回答3:

var options = { timeout: 10000, enableHighAccuracy: true };

$cordovaGeolocation.getCurrentPosition(options).then(function (position) {

    var latLng = new google.maps.LatLng(12.32719230000002, 76.73288185390626);

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

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    google.maps.event.addListenerOnce($scope.map, 'idle', function () {

        var marker = new google.maps.Marker({
            map: $scope.map,
            animation: google.maps.Animation.DROP,
            position: latLng
        });

        var infoWindow = new google.maps.InfoWindow({
            content: "Here I am!"
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open($scope.map, marker);
        });

    });
}, function (error) {
    console.log("Could not get location");
});