ともさんのHP >プロブラミング >自作JavaLibrary >グーグルマップをホームページに貼り付ける方法
グーグルマップをホームページに貼り付ける方法
グーグルマップを自分のホームページに貼り付ける方法を解説します。
目印を付けたり、写真を貼り付ける方法も解説します。
Google Maps JavaScript API Ver.3に対応しています。
バージョン2はこのページで解説している内容と異なりますのでご注意ください。
グーグルマップは、非営利のサイトであれば無料で貼り付けることができます。
以前のバージョン(Google MapsのAP Ver.2)ではあらかじめAPI Keyを取得する必要がありましたが、Ver.3になってからはこの必要がなくなっています。
Ver.2は2010年5月にサポートが終了しており、API Keyを新たに取得することはできません。新たにグーグルマップを貼り付ける場合はVer.3の
APIを使いましょう。
このページではGoogle Maps
Java
楽天 Script API v3について解説しています。
グーグルマップを自分のホームページに貼り付ける
以下のコードを自分のホームページに貼り付けてみてください。
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng( 34.65, 135.00); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas1"),myOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map_canvas1" style="width: 300px; height: 300px"></div> |
すると、下の地図がHP上に貼り付けられます。
簡単にできましたね。
しかしこのままでは使えません。地図の大きさを変えたり、表示する位置を変えたりしてみましょう。
グーグルマップのサイズを変更する
緑の文中の数値を変更します。
width: 300px;は幅300ピクセル、height: 300px;は高さ300ピクセルを意味します。
ピクセルはモニタを構成する点1つのこと。この数値を変更すれば表示される地図のサイズを変えることができます。
グーグルマップの表示位置を変更する
赤い数値を変更します。
34.65, 135.00は地球の北緯と東経をあらわします。この位置が表示される地図の中心になります。
グーグルマップの表示倍率を変更する
青字の数値を変更します。
10だと上の地図ですが、1にすると世界地図並みに広範囲が表示。
100ではごく狭い範囲しか表示されません。目的によってズーム数値を変更しましょう。
1つのページに複数のグーグルマップを貼り付ける
複数のグーグルマップを1つのページに貼り付けようと、上のコードを複数コピペしても、
同じ地図しか表示されません。こんなときはピンク色の文字を適当に変えます。ピンクの2つの文字は同じコピペ内で同一でなければいけません。
グーグルマップに押しピンアイコンを付ける
単に地図を表示しただけでは不足な場合もあります。地図上のここです、という目印も欲しいですね。
下のコードはグーグル標準の押しピンアイコン型の目印を地図上に付けるものです。
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.728134,139.7707); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas2"),myOptions); var marker = new google.maps.Marker({position: new google.maps.LatLng(35.728522,139.773495),map: map,title:"日暮里繊維街"}); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map_canvas2" style="width: 400px; height: 250px"></div> |
HTMLファイルにコピペすると、下の地図がHP上に貼り付けられます。
前のコードからの追加は、赤い1文で、押しピン型アイコンを追加するものです。1つの地図に複数のピンを立てたい場合は、複数行追記します。
赤文中の 35.728522,139.773495 はピンの位置、経度緯度です。"日暮里繊維街"とあるのは、ピンのタイトルで、マウスをピンの上に載せると、この文が
表示されます。
グーグルマップに画像を貼り付ける
目印ではなく、自分で撮影した画像を貼ってみましょう。
画像を貼るだけでなく画像をクリックすると大きな画像を表示するようにしました。
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.728134,139.7707); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas3"),myOptions); //写真貼り付け var image = './img/Tomo20100920105948_40_30.jpg'; var SMarker = new google.maps.Marker({position: new google.maps.LatLng(35.728522,139.773495), map: map,icon: image }); //写真クリックに対するイベント google.maps.event.addListener(SMarker, 'click', function() { window.open("./img/Tomo20100920105948_640_480.jpg","");}); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map_canvas3" style="width: 400px; height: 250px"></div> |
赤色の2行
を追記すると写真を貼ることができます。写真は自動的に小さくならないので、あらかじめ小さな写真を準備しておきましょう。
さらに青色の1文を追記すれば、画像クリックで大きな画像を表示します。大きな画像もあらかじめ用意しておきましょう。画像ではなく、
URLを記入してホームページやブログを開くこともできます。
グーグルマップに線を引く
今度は線を引いてみます。
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(35.728134,139.7707); var myOptions = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas4"),myOptions); var makeline = [ new google.maps.LatLng(35.728134, 139.7707), new google.maps.LatLng(35.729134, 139.7717), new google.maps.LatLng(35.729134, 139.7727), new google.maps.LatLng(35.728334, 139.7727), ]; var sen = new google.maps.Polyline({ path: makeline, strokeColor: "#ff0000", //色 strokeOpacity: 1.0, //不透明度 strokeWeight: 1 //線の太さ }); sen.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map_canvas4" style="width: 400px; height: 250px"></div> |
赤色の行を追記しました。例では4点の経度緯度を指定して、線で結んでいます。線の色、透明度、太さを設定できます。
最終更新日： 2012-07-10 07:53:45
ともさんのHP >プロブラミング >自作JavaLibrary >グーグルマップをホームページに貼り付ける方法
ツイート