はじめに
GoogleMapをionicで表示させたかったのですが、言語がtsなので少しうまく行かなかったので、少し力技ですがindex.htmlでGoogleMapをつかいました。
index.htmlのコード
//<head>タグに追加
<style>
#map {
height: 70%; //ここで地図の大きさは自由に調節できます
width: 70%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
//<body>タグに追加
<div id="map"></div> //ここのID部分にマップを追加するのでIDは控えておいて下さい
<script>
function initMap() {
console.log("index");
var myLatLng = {lat: -25.363, lng: 131.044}; //ここは初期位置なので好きなように
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
document.getElementById("map").style.display="none"; //この部分で地図は非表示に
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap">
</script>
表示させたいページのコード
今回使ったページ名はmapcheckでしたので、触ったのはmapcheck.tsです。 また、今回変更したのはexport class MapCheckPage部分だけです。
export class MapcheckPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log("map_page init");
let id=document.getElementById("map");
if(id){
id.style.display="block"; //表示させる部分です
}else{
console.log("id not found");
}
}
ionViewDidLeave(){
console.log("leave");
let id =document.getElementById("map");
if(id){
id.style.display="none"; //非表示にする部分です
}else{
console.log("id not found");
}
}
}
ionicにはライフサイクルがありionViewDidLoad()はページが読み込まれたら、ionViewDidLeave()はページを離れたら動く関数なので、それぞれそこに表示、非表示の切り替え処理を書きました。
