[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の箇所に地図を表示します。
これで地図が表示されます。
コメントを書く
トラックバック・ピンバック
トラックバックURL
[...] 座標を使った地図表示の記事を書きましたが、今度は住所から座標のみを取得する方法。 [...]
コメント