開発ブログ

株式会社Nextatのスタッフがお送りする技術コラムメインのブログ。

電話でのお問合わせ 075-744-6842 ([月]-[金] 10:00〜17:00)

  1. top >
  2. 開発ブログ >
  3. iPhone >
  4. iPhone GoogleMap SDK を利用せずにGoogleMapを表示
no-image

iPhone GoogleMap SDK を利用せずにGoogleMapを表示

おはようございます。
台風は消えてしまっていい天気ですね。
京都は台風はあまりこないみたいで本当に助かります。

さて、今日から2回に分けてGoogleMapを自作して実装する方法を書いていきたいと思います。

まず、何故GoogleMap SDKを使わないと考えたか。
フレームワークを使った方なら思ったはず。
フレームワークの容量おおきくない?って。

これが理由です。
フレームワークだけ18Mも必要なんですよ。アップルストアにあげてダウンロードしてもらう時20M以上だとWi-Fi経由が必要なんですね。
気軽に使っていただきたいアプリだとこれは重要だと思います。
そのため、SDKのフレームワークを使わずに実装してみました。
今回は動的にMapを変えるところまで説明します。

まず環境です。
Xcode4.6.3
StoryBoard使用
ARC使用

次に流れを説明します。
今回はSDKを使わずにということで、Google Maps JavaScript API v3を使って実装していきます。

1.Googleのデベロッパー登録をしAPI Keyを取得
2.HTMLとJavaScriptでGoogleMapを作成
3.ios側でJavaScriptを操作する

以上です。

では詳細を説明します。

1.Googleのデベロッパー登録をしAPI Keyを取得

Googleのデベロッパー登録はGoogleアカウントを作成し
こちらにアクセスしてください。
https://code.google.com/apis/console/
あとは説明に従えば登録はできます。

API Keyの取得については日本語の公式ドキュメントがあるのでこちらを参照してください。
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

2.HTMLとJavaScriptでGoogleMapを作成

ではHTMLとJavaScriptで実装します。
コードはこちらです。
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize(lat,lng,name,address) {
        var latlng = new google.maps.LatLng(lat,lng);
        var mapOptions = {
          center: latlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
          //マーカーの作成・登録
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            animation: google.maps.Animation.DROP
        });
         // 情報ウィンドウの生成
        var infoWindow = new google.maps.InfoWindow({
            content: name+"</br>"+address,
            maxWidth: 200
        });
          //情報ウィンドウの登録
        if(lat){
            infoWindow.open(map, marker);
        }
        // マーカーのクリックイベントの関数登録
        google.maps.event.addListener(marker, 'click', function(event) {
            // 情報ウィンドウの表示
            infoWindow.open(map, marker);
        });
      }
    </script>
  </head>
  <body >
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
APIKeyは取得したもの使ってくださいね。
マーカーの設置等は今回していますが、なくてもOKです。
これだけではなく、色々な昨日が他にもたくさん加えていけますので試してみてくださいね。

今日はここまで。
次回はios側でJavaScriptを操作する方法をお伝えします。
ありがとうございました。



  • posted by Nextatスタッフ
  • iPhone
TOPに戻る