Google Maps is not showing

Asked

Viewed 689 times

-1

I’m having a problem with Ionic, I added a map to my app and it doesn’t appear, I’m using Ionic’s Tab interface, the code apparently right, I used it in a Blank app and it worked, but when I add the same code in the tab of my main app it does not appear.

Follows the code:

<ion-view view-title="Localização">
  <ion-content>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1.0, user-scalable=no, width=device-width">
            <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">-->

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

        <script src="https://maps.googleapis.com/maps/api/js?key=[API-KEY]&sensor=true"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script> -->

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>
      </head>

      <body ng-app="starter" ng-controller="AccountCtrl">
        <ion-content scroll="false">
          <map on-create="mapCreated(map)"></map>
        </ion-content>

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

        </body>   
    </html>
      </ion-content>
    </ion-view>

Just keep that white image Clico na localização e o mapa não aparece

google-maps ionic maps

  • Seeing your question I was curious with the image: what are you using to test in IE and show multiple platform versions? I use Visual Studio to develop, and test on the Ripple emulator in Chrome or the Android emulator that comes on the Android SDK. Your example seems very interesting.

  • While you share your code, avoid sharing your key to google maps, even if it’s just for testing, you can omit that part.

  • You need to edit what is in the template folder within www, that index that appears there depending on the case need not move.

1 answer

-1

Change the height of your #map

  #map {
    height: 80%;
    border-radius: 16px;
  }

Browser other questions tagged google-maps ionic maps

You are not signed in. Login or sign up in order to post.