Google Maps not showing up! Maps JS API

ionic-v1
1

Hi!

I’m quite new to coding and I’m trying to include a Google places search view on my ionic app imported from ionic creator, while using the Google Places search box javascript API.

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

The problem I have is, whenever I include the code for the ion-view on my index.html file, it works perfectly. However when I put it into a template file places.html, and route it in routes.js, the map just doesn’t show up! Only the page structure (i guess?) without the css appears. I have tired a LOT of troubleshooting on the web, but no avail.
Please check the screenshots attached
index.jpg: when map code is added in the index file
template.jpg: when map code is added in a separate HTML file

image
template.jpg412×629 17.5 KB

image
index.jpg418×654 70.6 KB

I’m developing for android only, so it doesn’t matter if the map doesn’t show up on iOS.

Here’s the code

Index.html

` 




    <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>

    <style type="text/css">
      .platform-ios .manual-ios-statusbar-padding{
        padding-top:20px;
      }
      .manual-remove-top-padding{
        padding-top:0px;
      }
      .manual-remove-top-padding .scroll{
        padding-top:0px !important;
      }
      ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
        margin-left:-10px;
        margin-right:-10px;
      }
      ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
        border-radius:0px;
        border-left:0px;
        border-right: 0px;
      }
    </style>

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

    <script src="js/maps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABvIt0BKto9ijT03ZKNrTJpbHERwrQFVQ&libraries=places&callback=initAutocomplete"
         async defer></script>

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

  </head>
  <body ng-app="app">

    <div>
      <div>
          <ion-nav-bar class="bar-calm">
              <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
          </ion-nav-bar>
          <ion-nav-view></ion-nav-view>
      </div>
  </div>
  </body>
</html>

`
maps.js

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 31.11176, lng: 77.13994},
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });



  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

routes.js Maps part only
.state(‘maps’, {
url: ‘/maps’,
templateUrl: ‘templates/places.html’
})

places.html

  <ion-content>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
  </ion-content>
</ion-view>

I also tried to add the google maps JS as a controller in controllers.js, but I probably didn’t do it correctly, as that killed my app completely and just left me with a single page with the navigation bar text and no css.

Any help will be highly appreciated. I’m new to this, so thank you all in advance in pointing me to the right direction!!

Thanks and Regards