We are using static google map url in our ionic application which is working fine in IOS and not working in android. We appended the API key along with the URL and the URL is working in desktop browser and on iOS device. But it is not working on android device and shown blank (white) space. I have the following code below home.scss
testmap-image {
.mapcontainer {
position: relative;
img-loader {
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
ion-spinner {
height: 100px;
}
}
}
}
home.html
<div class="map-container">
<img-loader *ngIf="getUrl"
[src]="getUrl"
width="100%"
height="100px"
backgroundSize="cover"
backgroundPosition="center"
>
</img-loader>
</div>
In the above code, I am getting correct URL from getUrl() method.
The URL is : https://maps.googleapis.com/maps/api/staticmap?center=,22, market street, mumbai,India&zoom=15&size=650x150&key=xxxxxxxxxxxxxxxxxxxx
Can you please let me know what could be the issue and why it is not working on android device?
Regards