ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Loading takes 2/3 seconds , normal? #95

Closed chris087 closed 5 years ago

chris087 commented 5 years ago

I'm submitting a ... (check one with "x")

If you choose 'problem or bug report', please select OS: (check one with "x")

cordova information: (run $> cordova plugin list)

insert the output from the command here

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior:

Expected behavior:

Screen capture or video record:

Related code, data or error log (please format your code or data): loadMap() {

let praktijken = this.praktijkProvider.praktijken;

let mapOptions: GoogleMapOptions = {
  camera: {
     target: {
       lat: 52.18958,
       lng: 5.29524
     },
     zoom: 7,
     tilt: 0
   }
};

this.map = GoogleMaps.create('map_canvas', mapOptions);

this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

  this.loader.hide();

          for (let i = 0; i < praktijken.length; i++) {
              let praktijk = praktijken[i];

              let htmlInfoWindow = new HtmlInfoWindow();
              let frame: HTMLElement = document.createElement('div');

              frame.innerHTML = [
                '<div class="map-info-wrapper"><a class="map-close" onclick="closeWindow()" href="#"><img src="assets/imgs/close.png"></a><h2 class="map-title">'+praktijk.title+'</h2>',
                '<div class="map-address">'+praktijk.address.straat+'<br>'+praktijk.address.postcode+' '+praktijk.address.plaats+'<br>Tel: <a class="phonenr" href="tel://'+praktijk.phone[0]+'">'+praktijk.phone[0]+'</a> </div>',
                '<div class="map-info-buttons"><a href="#" class="button-2">Info</a> <div class="spacer"></div> <a href="tel://'+praktijk.phone[0]+'" class="button-2 button-3">Bel nu</a></div></div>'
              ].join("");

              htmlInfoWindow.setContent(frame, {width: "220px", height: "auto"});

              frame.getElementsByClassName("map-close")[0].addEventListener("click", () => {
                htmlInfoWindow.close();
              });  

              var options: MarkerOptions = {

                icon: {
                  url: 'www/assets/imgs/marker.png',
                  size: {
                    width: 28,
                    height: 36
                  }
                },
                position: {lat: praktijk.meta.maplist_latitude, lng: praktijk.meta.maplist_longitude}
              };

              this.map.addMarker(options).then((marker: Marker) => {

                    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
                      htmlInfoWindow.open(marker);
                    });

              });

          }

 });

}

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

Is it normal that loading the map takes 2/3 seconds? / first 2/3 secons white screen.

wf9a5m75 commented 5 years ago

Yes. Native map is not an HTML element. It takes longer time. Giving initialize option spends more longer time, because the maps plugin executes those parameters after initialized.