Google maps not showing

ionic-v1
1

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="http://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>
2

You don’t have inject map directive in app.js :

angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.directives’])

3

tried doing this , then there is an error showed:
Module ‘starter.directives’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
https://docs.angularjs.org/error/$injector/nomod?p0=starter.directives

why are we trying to insert this starter.directives?

4

look the ionic-starter-map : https://github.com/driftyco/ionic-starter-maps

In the module starter.directive there is the map directive : https://github.com/driftyco/ionic-starter-maps/blob/master/js/directives.js

And this file directives.js must insert in your index.html :

   <script src="js/directives.js"></script>
1 Like
5

thank you @tomadj you solved my problem, can you also help me by explaining me how to insert the marker at the user location on the map.
i tried using this method which i put inside the controller and after the navigator.geolocation.getCurrentPosition

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

i’m getting error Reference Error: map is not defined

6

Yes, try like this :

controller :

  $scope.mapCreated = function(map) {

var latlngPlace = new google.maps.LatLng(45.778954,3.095466);
        var marker = new google.maps.Marker({
            map: map,
            position: latlngPlace
    });

$scope.map = map;
};

View :

 <map on-create="mapCreated(map)"></map>
1 Like
7

Off topic but do I need to have my google api key when I publish this app?

Thanks

8

The map is still not working in the android device. I’m trying a lot but nothing is showed, only the footer is showed with the findme button?
How can i solve this problem ?? @tomadj

9

the issue is solved. can you help me with the tabs?
i want the parent header to remain at the header on the tabs. I tried removing the header from the specific tabs page but now some of the content comes under the tabs .
can you help me with this?

10

how can you solved that problem , right now I’m trying to solve the problem that android device doesn’t work same prob :frowning:

11

can you tell me what problem are you finding?

12

Thanks for your help, but now i solved it, I just wrote the google map URL wrong. right now my map work very fine :smiley:

1 Like
13

Yes you will, there is a script in index.html that carries the key:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
14

This is easy for the map. native or hybrid ( i have choosed hybrid with angular, just more easy)

in first with cordova :

in second for angular js :
in index.html :

in view :


    <ion-footer-bar class="bar-stable">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
    </ion-footer-bar>

in controller :
.controller(‘mapCtrl’, function($scope) {
$scope.map;

$scope.mapCreated = function(map) {
$scope.map = map;
};

$scope.centerOnMe = function () {
if (!$scope.map) {
return;
}

navigator.geolocation.getCurrentPosition(function (pos) {
  console.log('Got pos', pos);
  $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));


}, function (error) {
  alert('Unable to get location: ' + error.message);
});

};

})

in THIS codepen ( it is not me do this. I use it and it is good implementation…) : > http://codepen.io/ionic/pen/uzngt

i see cordova plugin in first for reviews : http://ngcordova.com/docs/plugins/
and i’m use npm angulars : https://www.npmjs.com/package/angular

Very Good Framework :smile:

Oby.

15

Thank you for the post, very helpful.

16

Hi and thanks for links. I just did everything the docs say like in directives.js and inside controller.js and index.html but map is still displayed. I can get the log when I click centerOnMe() but the map in fact is not displayed in Intel XDK Emulator or on a real device.

Got pos Position {coords: Coordinates, timestamp: 1474741092688}
    coords: Coordinates
    accuracy: 150
    altitude: 100
    altitudeAccuracy: 80 
    heading: NaN
    latitude: 43.465187
    longitude: -80.522372
    speed: null

What chould be the problem? Thanks in advance.

18

Never mind. I just checked css and removed # from #map because there is no id=“map”. Thanks again.

19

Hello everyone,

I followed above code but still map is not working, giving white screen please let me know the actual problem.

There is no api key in my google api path, is that key necessary if yes, I tried to generate key but it gives me error “could’nt create project”

Please help me out

Thanks & Regards
Vinod

20

Ensure that the location and Google Maps JavaScript API is properly loaded in your index. html and that you have a valid API key.