LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Google Mapの利用 -(3)初期表示の位置設定-

<<   作成日時 : 2007/02/22 12:37   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

先日より試験的に使っている"Google Map"。
現在、ツールボタンやスライダーを表示させているが、デフォルトでは海外の地図が表示されている。

 サンプルマップ


指定した位置を表示させるにも設定が必要なわけだが、"Google Map"の場合はその位置の座標を指定することで解決する。


まず、"Google Map"のサイトにアクセスする。

 Google Map


次に指定したい位置を表示する。

 指定位置


この時、右上の「このページのリンク」をクリックする。

 このページのリンク


一見、何も変わってないように見えるが、ブラウザのURL欄に長い文字列が表示されるようになる。


http://maps.google.co.jp/maps?f=q&hl=ja&
q=%E5%A4%A7%E9%98%AA%E5%B8%82&ie=UTF8&z=15&
ll=34.702495,135.49417&spn=0.017535,0.038195&om=1



このURL内の「z=15」が縮尺、「34.702495,135.49417」が座標となる。
そこで前回のソースに追記する。



<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
  map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
 }
}
//]]>
</script>



 ↓

<script type="text/javascript">
//<![CDATA[
function load() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
  map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
 }
}
//]]>
</script>



 地図表示


これで指定した場所が表示されるようになった。

次はアイコンやふき出しが表示されるようにカスタマイズしようと思う。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Mapの利用 -(3)初期表示の位置設定- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる