Google Map APIを利用してみよう（２）
前回の記事では携帯からも表示が出来るGoogle Mapの使い方を
書いてみました。
前回の記事を携帯から見たらちゃんと表示され無かったのですが
PC向けのページを携帯向けに変換するサービスは
ちょっと困りものです。
さて、今回はPC、スマートフォンから利用出来る
JavaScritpを使ったGoogle Mapの表示方法です。
アメブロではJavaScriptが使えないので
別サーバーですがこんな感じに表示されます。
マーカーをクリックしてみてください（笑い）
何かに使えそうな気がしませんか？
今回の表示を行うためにはHTML内にJavaScriptで記述をした上で
マーカー情報を記載するkmlファイルを用意しなければなりません。
まずはJavaScriptの記述について
<body>内の最下部に
<script language="javascript">
window.document.body.onload=function(){
var initPos = new google.maps.LatLng(43.068625,141.350801);
var myOptions = {
noClear : true,
center : initPos,
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmlUrl = "http://atshe.web.fc2.com/kml.kml";
var kmlLayer = new google.maps.KmlLayer(kmlUrl);
kmlLayer.setMap(map_canvas);
}
</script>
上記みたいに書きます。
マップを書き出す場所（今回はmap_canvas）が無いと表示されないので
<div id="map_canvas" style="width:100%; height:500px">%lt;/div>
のようにidがmap_canvasの"はこ"を作っておきます。
次にkmlファイルですが
http://atshe.web.fc2.com/kml.kmlをDLして見てください（手抜き）。
書き換えたり、マーカークリックで出てくるバルーンの中に
リンクを仕込んだりするとトラベルアフィリが出来そうな気がしませんか？
手作業でするのは不可能に近いと思いますので
ツールが不可欠でしょうな。
書いてみました。
前回の記事を携帯から見たらちゃんと表示され無かったのですが
PC向けのページを携帯向けに変換するサービスは
ちょっと困りものです。
さて、今回はPC、スマートフォンから利用出来る
JavaScritpを使ったGoogle Mapの表示方法です。
アメブロではJavaScriptが使えないので
別サーバーですがこんな感じに表示されます。
マーカーをクリックしてみてください（笑い）
何かに使えそうな気がしませんか？
今回の表示を行うためにはHTML内にJavaScriptで記述をした上で
マーカー情報を記載するkmlファイルを用意しなければなりません。
まずはJavaScriptの記述について
<body>内の最下部に
<script language="javascript">
window.document.body.onload=function(){
var initPos = new google.maps.LatLng(43.068625,141.350801);
var myOptions = {
noClear : true,
center : initPos,
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmlUrl = "http://atshe.web.fc2.com/kml.kml";
var kmlLayer = new google.maps.KmlLayer(kmlUrl);
kmlLayer.setMap(map_canvas);
}
</script>
上記みたいに書きます。
マップを書き出す場所（今回はmap_canvas）が無いと表示されないので
<div id="map_canvas" style="width:100%; height:500px">%lt;/div>
のようにidがmap_canvasの"はこ"を作っておきます。
次にkmlファイルですが
http://atshe.web.fc2.com/kml.kmlをDLして見てください（手抜き）。
書き換えたり、マーカークリックで出てくるバルーンの中に
リンクを仕込んだりするとトラベルアフィリが出来そうな気がしませんか？
手作業でするのは不可能に近いと思いますので
ツールが不可欠でしょうな。