Google Map not displayed

Ionic Framework ionic-v3
1

Hi guys, I’m trying to display a Google Map in a modal using ionic 2. (I’m using rc3). I followed the the tutorial from Ionic docs. This is my code:
export class MapPage {

       @ViewChild('map') mapElement;

      constructor() {}

       ngAfterViewInit() {
        let element: HTMLElement = this.mapElement;
        console.log(element);

        let map = new GoogleMap(element);
        map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
        let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);
        let position: CameraPosition = {
          target: ionic,
          zoom: 18,
          tilt: 30
        };
       map.moveCamera(position);
       let markerOptions: GoogleMapsMarkerOptions = {
         position: ionic,
         title: 'Ionic'
       };
       map.addMarker(markerOptions)
         .then((marker: GoogleMapsMarker) => {
            marker.showInfoWindow();
          });
      }
    }

I also got a div <div #map> where the map is supposed to display. But I the only thing what I getting is a blank screen. It’s frustating. I can watch the Google Map API and the request are hitting ok. The only thing that I can figure out is that the div is not being assined when the view is initialized, I digged into ‘ionic-native’ source code and the same example of my code is displayed. I’m out of ideas.
Can some one help me?

2

Did u find any solution? Please let me know as I am stuck on the same problem.

3

you have to set height 100% of that div to display map .Have you set it or not ?

5

Yes I have set it. Please take a look at my code and let me know what is wrong with it.

6

i could not found any code related to map in your git

7

I am sorry for the inconvenience. I dont know what happened. Anywho I have updated it. You can have a look. The map is in the home page

8

first thing i notice is that <div #map id="map_canvas"></div> you may have to use map as id not map_canvas=> <div #map id="map"></div>

which tutorial you follow ?
i think you have to follow the below tutorial

9

I changed map_canvas to map and still it doesn’t show the map. I followed the demo tutorial on ionic’s website and then improvised according to various websites.

11

where is your google api .js script in index.html ?

12

the api keys are in config.xml and I have no api.js script. What is that??

13

you have to add script tag in index.html file with your key

14

Even when using the cordova plugin I have to do this??

15

yes you have to do that

16

just forget about all tutorial and follow the tutorial given in above my link

17

Ohkay. Can u tell me the whole line as I don’t know what to add in the script?

18

there is step by step demo how to implement google map by josh morony who is also member of our forum and it will work 100%

19

Can you give me the link? I found his blog where he used the Javascript SDK but i don’t want to use that. I want to use the plugin.

20

It worked. I kept the maps div in iframe and viola it worked. Thanks for your help

1 Like
21

can you please write your html here , i have the same issue , what was the solution ?

22

please add link to your project , i can’t make plugin worked well , map not show