Ionicアプリ開発でGoogleMapを表示したい

「index.html」のに以下を追加

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">

「index.html」のに以下を追加

  <script>

    function initialize() {
      //緯度と経度の配列
      var data = new Array();
      data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
      data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅'});

      var myLatlng = new google.maps.LatLng(data[0].lat, data[0].lng);
      var opts = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),opts);

      //複数のマーカーを配列に整理
      var markers = new Array();
      //マーカ-の作成
      for (i = 0; i < data.length; i++) {
        markers[i] = new google.maps.Marker({
          position: new google.maps.LatLng(data[i].lat, data[i].lng),
          map: map
        });
        //マーカーに使うアイコンの指定
        markers[i].setOptions({
        icon: {
            url: 'https://2.bp.blogspot.com/-9HsZ98OdwYg/Vtof8pIYl-I/AAAAAAAA4bI/udf_7qhu-6o/s180-c/train_eki_building.png',
            scaledSize: new google.maps.Size( 30 , 30 ),
        }
        });
        dispInfo(markers[i],data[i].name);
      }
    }

    function dispInfo(marker,name) {
      google.maps.event.addListener(marker, 'click',
      function(event) {
        new google.maps.InfoWindow
        ({content:name}).open(marker.getMap(), marker);
      });
    }

  </script>

<!-- 地図のリンク -->
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
  </script>

「src/pages/home/home.html」に以下を追加

<body onload="initialize()">
    <div id="map_canvas" style="width:1000px; height:600px"></div>
  </body>

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。