Ionic Native costuming Google Maps Marker


#1

I’m trying to configure custom icon (costume component with dynamic image for a google map marker using Ionic Native google maps but i dont know how to added to my marker
this an example


Ionic Native Google Maps custom icon
#2

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000


#3

Thank you for your contribution
after a search I concluded that I have to use the GroundOverlay for the cree but when I try to resume your example it still does not work I receive no error and nothing appears here my code

 let bounds = [
      {
        lat: 33.579191,
        lng: -7.62335
      }
    ];
    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log("Map is ready!", this.map.getDiv());
      return this.map
        .addGroundOverlay({
          url: "assets/imgs/logo.png",
          bounds: bounds,
          clickable: true
        })
        .then(grnoudoverlay => {
          grnoudoverlay
            .on(GoogleMapsEvent.GROUND_OVERLAY_CLICK)
            .subscribe(() => {
              console.log("clicked");
              grnoudoverlay.setImage("assets/imgs/marque.png");
            });
        }); 

#4

Please share your project files on Github. I will check it.


#5

sorry i have some problems with git i have uploaded it in drive you can check it
https://drive.google.com/open?id=1WYm34y19Fjyodrtiwy1JatinhvWfubF-

thank you


#6

Thank you for sharing a demo project. The problem is your image is too large.

12-16 18:15:34.426 19501-19637/io.ionic.starter E/AndroidRuntime: FATAL EXCEPTION: GLThread 286
                                                                  Process: io.ionic.starter, PID: 19501
                                                                  java.lang.IllegalArgumentException: Textures with dimensions4096x2048 are larger than  the maximum supported size 2048x2048
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.gl.ah.a(:com.google.android.gms.DynamiteModulesB@11951230:109)
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.gl.ah.a(:com.google.android.gms.DynamiteModulesB@11951230:35)
                                                                      at com.google.maps.api.android.lib6.impl.bk.a(:com.google.android.gms.DynamiteModulesB@11951230:60)
                                                                      at com.google.maps.api.android.lib6.gmm6.api.p.a(:com.google.android.gms.DynamiteModulesB@11951230:78)
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.bs.a(:com.google.android.gms.DynamiteModulesB@11951230:664)
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.bs.b(:com.google.android.gms.DynamiteModulesB@11951230:270)
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.bb.f(:com.google.android.gms.DynamiteModulesB@11951230:257)
                                                                      at com.google.maps.api.android.lib6.gmm6.vector.bb.run(:com.google.android.gms.DynamiteModulesB@11951230:11)

This is not plugin’s bug. Just your problem.


#7

thank you
i change the image with the faveIcon of ionic (it’s so small) and nothing is appear in the screen :confused:
i create a repository in github


#8

The maps plugin does not support .ico file


#9

i change it with a small jpg and still nothing is displayed

PS: i update my github you can check it Thank you


#10

Did you confirm what the URL of the app?
For example, if your app is displayed on http://localhost/app/app.html, the image URL should be /assets/image.jpg.
Confirm your app page URL with console.log(location)


#11

when i type the url after localhost:8100 (http://localhost:8100/assets/imgs/marker.jpg) in browser i get the image and the same url works when i attributed in src of image but in js he didn’t appear
when i try to log location i get this


#12

I tested your repo, and your code is wrong.
You displays completely different location from the ground overlay.
You have to do like this:


  loadMap() {
    let bounds: ILatLng[] = [
      { lat: 40.712216, lng: -74.22655 },
      { lat: 40.773941, lng: -74.12544 }
    ];
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: bounds,  <-- you have to set the camera for the ground overlay.
        tilt: 30
      }
    };
    this.map = this.googleMaps.create("map", mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      return this.map
        .addGroundOverlay({
          url: "assets/imgs/marker.jpg",
          bounds: bounds,
          clickable: true
        })
        .then((grnoudoverlay: GroundOverlay) => {
          grnoudoverlay
            .on(GoogleMapsEvent.GROUND_OVERLAY_CLICK)
            .subscribe(() => {
              console.log("clicked");
              grnoudoverlay.setImage("assets/icon/favicon.ico");  <-- not supported anyway
            });
        });
      // this.map
      //   .addMarker({
      //     icon: {
      //       url: "assets/imgs/logo.png",
      //       size: { width: 30, height: 30 }
      //     },
      //     title: "titre de popver",
      //     animation: "DROP",
      //     snippet: "snippet cest le text qui s'affiche apre le titre ",
      //     position: {
      //       lat: 43.0741904,
      //       lng: -89.3809802
      //     }
      //   })
      //   .then(marker => {
      //     marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      //       // alert("clicked");
      //     });
      //   });
    });
  }


#13

you’re right finally it’s work thank you so much


#14

-------- Solved? --------


#15

y que pasa si la imagen viene de una url externa por ejemplo desde un servidor