iPhone GoogleMap SDK を利用せずにGoogleMapを表示
おはようございます。
台風は消えてしまっていい天気ですね。
京都は台風はあまりこないみたいで本当に助かります。
さて、今日から２回に分けて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を操作する
以上です。
では詳細を説明します。
こちらにアクセスしてください。
https://code.google.com/apis/console/
あとは説明に従えば登録はできます。
API Keyの取得については日本語の公式ドキュメントがあるのでこちらを参照してください。
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
コードはこちらです。
マーカーの設置等は今回していますが、なくてもOKです。
これだけではなく、色々な昨日が他にもたくさん加えていけますので試してみてくださいね。
今日はここまで。
次回はios側でJavaScriptを操作する方法をお伝えします。
ありがとうございました。
台風は消えてしまっていい天気ですね。
京都は台風はあまりこないみたいで本当に助かります。
さて、今日から２回に分けて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を操作する方法をお伝えします。
ありがとうございました。
