Google Map not displayed


#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


#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