Ionic 3 examples of using Google Maps API
Some examples of how to use google maps javascript API on a Ionic application and use HTML5 geolocation.
Starting
- First you need to visit the google maps javascript API (https://developers.google.com/maps/documentation/javascript/) then get your key.
- Second you need the api in your
src/index.html, thishttps://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE.
Using Google Maps Javascript API
- First example:
- On the html page i just put this div:
- Some css
#map {
height: 100%;
}
- On typescript step, i have to do something first. Declare a google variable.
declare const google;
- Then i can use it.
@ViewChild('map') mapElement: ElementRef;
map: any;
ionViewDidLoad() {
let posMaceio = { lat: -9.648139, lng: -35.717239 }
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 8,
center: posMaceio,
mapTypeId: 'roadmap'
});
this.map.setCenter(posMaceio);
}