[JQuery]googlemaps v3で座標を使って地図を表示

2010年07月18日

JQueryを使用 + googlemaps v3での地図とマーカー表示方法。
※データベースから座標を取得するなどの場合


※JQueryをあらかじめDLしておいてください。

htmlのhead部分を下記のようにします。

1
2
3
4
5
6
7
8
9
10
<head>
<script type="text/javascript" src="/festiva/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/festiva/js/googlemap.js"></script>
<script type="text/javascript">
$(function(){
  $('#googleMap').gmap('43.0550852', '141.3412251');
});
</script>
</head>

まず、JQueryをおき、googlemapのAPI(v3)を記述します。
googlemap.jsは受け取ったデータを処理するスクリプトファイルです。
直接記述しているスクリプトはgooglemap.jsで処理するために送るデータになります。
なぜ、ここに書いたかというと、動的なページの場合を想定しているからです。

$(‘#googleMap’)はgoogle mapを表示する箇所になります。

さて、肝心の処理スクリプト(googlemap.js)は下記のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function($){
  $.fn.gmap = function(lat, lng) {
    var mapdiv = $(this).get(0);
    var myOptions = {
      zoom: 15,
      center: new google.maps.LatLng(lat,lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true,
      mapTypeControl: true
    };
    var map = new google.maps.Map(mapdiv, myOptions);
    var marker = new google.maps.Marker({
      position: myOptions.center,
      map: map
    });
  };
})(jQuery);

これで、準備完了です。

実際に地図を表示するにはhtmlに場所とサイズを指定します。
ここでは#googleMapの箇所に地図を表示します。

1
<div id="googleMap" style="width: 100px;height: 100px;"></div>

これで地図が表示されます。

コメントする ：コメント(0) ：トラックバック(1)
カテゴリ
関連記事

コメント：0件

  1. コメントはありません。
投稿者名
E-Mail

メールアドレスは公開いたしません
URL
コメント

トラックバック：1件

  1. [...] 座標を使った地図表示の記事を書きましたが、今度は住所から座標のみを取得する方法。 [...]
    [JQuery]phpで住所から座標を割り出す ｜ Director's Cut – art project team Blog -
ページのトップへ

artprojectteam & festiva Tweet

Loading..