So laden Sie eine Ansicht in eckig. Google Maps API

Question

Mein Problem ist, dass wenn ich den Bildschirm mit der Google-Karte laden, die Karten nicht angezeigt werden. zuerst nach einer Aktualisierung. Was ist mein Fehler oder wie kann ich das verhindern?

.controller('LocationsCtrl', function($scope, $http, $timeout) { 

     $scope.ini = function() { 

     var map; 
     var infowindow = new google.maps.InfoWindow(); 
     function initialize() { 

      var mapProp = { 
       center: new google.maps.LatLng(52.4550, -3.3833), 
       zoom: 7, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map = new google.maps.Map(document.getElementById("map"), mapProp); 

      $.getJSON("https://onepicture.ch/locations.php", function(json1) { 

      $.each(json1.stores, function (key, data) { 

       var latLng = new google.maps.LatLng(data.lat, data.lng); 

       var marker = new google.maps.Marker({ 
        position: latLng, 
        title: data.title, 
        map: map 
        // icon: icon, 

       }); 

       var details = "<b>" + data.title + "<b><br> " +data.address + "<br> " + data.city + "<br>"; 

       bindInfoWindow(marker, map, infowindow, details); 

       }); 

      }); 

    } 

    function bindInfoWindow(marker, map, infowindow, strDescription) { 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(strDescription); 
      infowindow.open(map, marker); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 


    } 
}) 

Markup:

<ion-view ng-init="ini()"> 
    <ion-header-bar class="banner-top ext-box" align-title="left"> 
    <div class="int-box2"><h2 id="s_back1">MAP</h2></div> 
    </ion-header-bar> 
<ion-content overflow-scroll="true" class="has-header has-footer" scroll="false" > 


    <div style="height:100%; width:100%;"> 
     <div id="map"></div> 
    </div> 



</ion-content> 
<ion-footer-bar class="bar-bottom" align-title="left"> 
    <ul> 
    <a href="#/home" nav-transition="none"><li><img src="img/home.png" class="img-left" alt=""></li></a> 
    <a href="#/list" nav-transition="none"><li><img src="img/list.png" class="img-left"alt=""></li></a> 
    <a href="#/map" nav-transition="none"><li><img src="img/map_de.png" class="img-left"alt=""></li></a> 
    <a href="#/info" nav-transition="none"><li><img src="img/info.png" class="img-left"alt=""></li></a> 
    <a href="#/tapsi" nav-transition="none"><li><img src="img/tapsy.png" class="img-left"alt=""></li></a> 
    </ul> 
</ion-footer-bar> 
</ion-view> 

Answer 1

Neben übergeordneten Container, muss die Karte div Größe als auch ausdrücklich angegeben sein:

<div id="map"></div> 

CSS

#map { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     width: 100%; 
    } 

Plunker