Software Archive
Read-only legacy content
17061 Discussions

Google maps AngularJS Ionic grey map intel xdk

nicolas_r_
Beginner
315 Views

I'm working with Intel XDK and Ionic as framework the problem that i have is i'm trying to use google map and when i load the apk in the emulator and on real device the map display grey and i have to rotate the screen and then the map display as normal with the marker and controllers. 

<div id="map" style="height: 60vh"></div>
<script>
            var map;
            function initMap() {
              var myLatLng = {lat: -39.83250715421206, lng: -73.23938548564911};

              // Create a map object and specify the DOM element for display.
              var map = new google.maps.Map(document.getElementById('map'), {
                center: myLatLng,
                scrollwheel: false,
                zoom: 15
              });

              // Create a marker and set its position.
              var marker = new google.maps.Marker({
                map: map,
                position: myLatLng,
                title: 'Banco de Sangre'
              });
            }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDl1lpx2C8RmatmhG__vBcmtjEsEPjUVbo&amp;&amp;callback=initMap" async="" defer=""></script>

I Try ionic.Platform.ready(function(){ but then that map load in blank.

0 Kudos
3 Replies
Chris_P_Intel
Employee
315 Views

What calls initMap()?

Is it possible that the div itself (or any of its parents) is not displayed when initMap() is called? Google Maps won't work if the div is display:none; 

0 Kudos
nicolas_r_
Beginner
315 Views

so i have to add something on the div to init the map when it loads?

0 Kudos
Gym_P_
Beginner
315 Views

Even i do have the same problem

AngularJS Training in chennai

 

 

0 Kudos
Reply