Community
cancel
Showing results for 
Search instead for 
Did you mean: 
nicolas_r_
Beginner
73 Views

Google maps AngularJS Ionic grey map intel xdk

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.

Tags (2)
0 Kudos
3 Replies
Chris_P_Intel
Employee
73 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; 

nicolas_r_
Beginner
73 Views

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

Gym_P_
Beginner
73 Views

Even i do have the same problem

AngularJS Training in chennai

 

 

Reply