FC2ブログ

Google Maps API 使い方


<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>

これで Google Maps API javascript の読み込み

アプリがユーザ位置情報の取得にセンサーを使いたいので
sensor=true にしている
あと、
libraries パラメータを利用して ライブラリを読み込む

<body onload="createMap()">

<div id="map" stype="with:640px; height:480px; "></div>

これで
id="map" の div を作って
body の onload イベントつまり読み込んだときの
イベントから
createmap()を読んで
map オブジェクトの初期化をする

そのときに呼び出す自作関数
ていうか、』世の中ではユーザ関数というらしい

function createMap(){
var position = new google.maps.LatLnt(35,135);

var options ={
zoom:15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map'), options);

var market = new googlemaps.market({
position:position,
map:map
});
}

地図を初期化するための各種プロパティを設定した
options を作成している

center には、地図の中心位置を設定するので
これは
var position で 35.135 を指定してあるので
これをそのまま使う

mapTypeId には地図のスタイルを設定する
たしか yahoo マップなら地下とかあった
普通の地図なら
ROADMAP にする

google.maps.Map() の引数には
描く場所、指定するオプション
だけど全部かくのは面倒なので
var options で変数宣言して格納するほうが楽
あと、描画する位置も div の id="map" のところだから
map としている

次は、。マーカー
position はマーカーを表示する位置の指定
これは、すでに緯度経度の場所を指定しているから
そこにマーカーを出したいのでそのまま
position:position
でOK

map には、マーカーを表示する地図を指定する
すでに
var map で変数宣言して、この中にいろいろ設定しているから
map:map
でOK

つまり、マーカーを描きたいなら
var market=new google.maps.Market({
position: マーカーの位置,
map: 表示する地図を指定
});

というようになる

スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック