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
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");
});
});
Please share your project files on Github. I will check it.
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
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.
thank you
i change the image with the faveIcon of ionic (it’s so small) and nothing is appear in the screen
i create a repository in github
The maps plugin does not support .ico file
i change it with a small jpg and still nothing is displayed
PS: i update my github you can check it Thank you
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)
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
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");
// });
// });
});
}
you’re right finally it’s work thank you so much
-------- Solved? --------
y que pasa si la imagen viene de una url externa por ejemplo desde un servidor