この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
gmap3_marker [2018/05/26 16:37] 管理者 |
gmap3_marker [2018/05/26 16:47] (現在) 管理者 |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
+ | {{tag>プログラミング関連 Google_Maps_API3}} | ||
+ | [[start]]>[[programming_start]] | ||
+ | ~~NOCACHE~~ | ||
+ | ====== GoogleMaps APIv3 マーカー表示====== | ||
+ | DokuWiki に Google Maps Javascript API v3 にマーカー(ピン)を表示します。 | ||
+ | |||
+ | ---- | ||
+ | ===== もっとも単純なマーカー ===== | ||
+ | 単純にマーカーを立てるだけです。クリックしても反応しません | ||
+ | |||
+ | <html> | ||
+ | <style> | ||
+ | #mapdiv1 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv1"></div> | ||
+ | <script> | ||
+ | var map1; | ||
+ | function initMap1() { | ||
+ | map1 = new google.maps.Map(document.getElementById('mapdiv1'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker1 = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map1 | ||
+ | }); | ||
+ | |||
+ | //デモ2-4起動 | ||
+ | initMap2(); | ||
+ | initMap3(); | ||
+ | initMap4(); | ||
+ | |||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap1" async defer></script> | ||
+ | </html> | ||
+ | |||
+ | <code javascript> | ||
+ | <style> | ||
+ | #mapdiv {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv"></div> | ||
+ | <script> | ||
+ | var map; | ||
+ | function initMap() { | ||
+ | map = new google.maps.Map(document.getElementById('mapdiv'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | //マーカー作成 | ||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script> | ||
+ | </code> | ||
+ | |||
+ | マーカーを表示しているのは下記の部分で、経度と緯度を変更すると任意の場所にマーカーを表示できます。 | ||
+ | <code javascript> | ||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 【緯度】, lng: 【経度】}, | ||
+ | map: map | ||
+ | }); | ||
+ | </code> | ||
+ | |||
+ | ---- | ||
+ | ===== マーカーに文字表示とツールチップ表示 ===== | ||
+ | マーカーに文字を表示とオンマウスでツールチップ表示します。 | ||
+ | |||
+ | <html> | ||
+ | <style> | ||
+ | #mapdiv2 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv2"></div> | ||
+ | <script> | ||
+ | var map2; | ||
+ | function initMap2() { | ||
+ | map2 = new google.maps.Map(document.getElementById('mapdiv2'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker2 = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map2, | ||
+ | title: 'オンマウスでツールチップ表示', | ||
+ | label: {text:'東京',color:'#ffffff',fontSize:'10px',fontWeight:'bold'} | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | <code javascript> | ||
+ | <style> | ||
+ | #mapdiv {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv"></div> | ||
+ | <script> | ||
+ | var map; | ||
+ | function initMap() { | ||
+ | map = new google.maps.Map(document.getElementById('mapdiv'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | //マーカー作成 | ||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map, | ||
+ | title: 'オンマウスでツールチップ表示', | ||
+ | label: {text:'東京',color:'#ffffff',fontSize:'10px',fontWeight:'bold'} | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script> | ||
+ | </code> | ||
+ | |||
+ | title属性でツールチップ表示(マウスを数秒マーカーに乗せると表示)します。マウスの無いスマホやタブレットでは表示できないので重要な情報は書けません。 | ||
+ | |||
+ | label属性でマーカー上に文字を表示します。マーカーから文字がはみ出してもよければ文字数を多くしたり文字の大きさを大きくする事ができます。属性名は大文字小文字に注意して下さい(font<fc #ff0000>S</fc>ize)。 | ||
+ | |||
+ | <code> | ||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map, | ||
+ | title: '【テキスト】', | ||
+ | label: {text:'【テキスト】',color:'【カラー】',fontSize:'【文字サイズ】',fontWeight:'【文字太さ】'} | ||
+ | }); | ||
+ | </code> | ||
+ | |||
+ | labelの装飾は省略できます。 | ||
+ | <code> | ||
+ | //一部省略 | ||
+ | label: {text:'【テキスト】',color:'【カラー】'} | ||
+ | //最も省略した場合 | ||
+ | label: '【テキスト】' | ||
+ | </code> | ||
+ | |||
+ | ---- | ||
+ | ===== 吹き出しの表示 ===== | ||
+ | マーカーをクリックすると吹き出しが表示されます。 | ||
+ | 別名 情報ウィンドウ・情報窓・infoWindow・バルーンとも言うようです。 | ||
+ | |||
+ | |||
+ | <html> | ||
+ | <style> | ||
+ | #mapdiv3 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv3"></div> | ||
+ | <script> | ||
+ | var map3; | ||
+ | function initMap3() { | ||
+ | map3 = new google.maps.Map(document.getElementById('mapdiv3'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker3 = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map3, | ||
+ | }); | ||
+ | |||
+ | var infowindow3 = new google.maps.InfoWindow({ | ||
+ | content: '表示するメッセージ' | ||
+ | }); | ||
+ | |||
+ | //↓最初から表示(下の行を削除すると最初非表示) | ||
+ | infowindow3.open(map3,marker3); | ||
+ | |||
+ | marker3.addListener('click', function() { | ||
+ | infowindow3.open(map3, marker3); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | <code javascript> | ||
+ | <style> | ||
+ | #mapdiv {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv"></div> | ||
+ | <script> | ||
+ | var map; | ||
+ | function initMap() { | ||
+ | map = new google.maps.Map(document.getElementById('mapdiv'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map, | ||
+ | }); | ||
+ | |||
+ | //吹き出し準備 | ||
+ | var infowindow = new google.maps.InfoWindow({ | ||
+ | content: '表示するメッセージ' | ||
+ | }); | ||
+ | |||
+ | //吹き出しを最初から表示(下の1行を削除すると最初非表示) | ||
+ | infowindow.open(map,marker); | ||
+ | |||
+ | //マーカークリックすると吹き出し表示 | ||
+ | marker.addListener('click', function() { | ||
+ | infowindow.open(map, marker); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script> | ||
+ | </code> | ||
+ | |||
+ | 「new google.maps.InfoWindow」で表示するメッセージをセット | ||
+ | |||
+ | 最初から表示する場合はInfoWindow.open()メソッドで吹き出しを表示したい位置を指定します。 | ||
+ | |||
+ | マーカークリックで表示したい場合はマーカーにイベントハンドラに登録して吹き出しを表示します。 | ||
+ | |||
+ | ---- | ||
+ | ===== 自作アイコン使用 ===== | ||
+ | <html> | ||
+ | <style> | ||
+ | #mapdiv4 {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv4"></div> | ||
+ | <script> | ||
+ | var map4; | ||
+ | function initMap4() { | ||
+ | map4 = new google.maps.Map(document.getElementById('mapdiv4'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker4 = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map4, | ||
+ | icon:{ | ||
+ | url:'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png', | ||
+ | size:new google.maps.Size(64,64),//アイコンサイズ | ||
+ | origin:new google.maps.Point(0,0), //(アイコンセット用切り出し位置) | ||
+ | scaledSize: new google.maps.Size(32, 32), //出力サイズ | ||
+ | anchor:new google.maps.Point(32,0) //中心座標(出力サイズ規準) | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | <style> | ||
+ | #mapdiv {width:400px;height:300px;} | ||
+ | </style> | ||
+ | <div id="mapdiv"></div> | ||
+ | <script> | ||
+ | var map; | ||
+ | function initMap4() { | ||
+ | map = new google.maps.Map(document.getElementById('mapdiv'), { | ||
+ | center: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | zoom: 8 | ||
+ | }); | ||
+ | |||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, | ||
+ | map: map, | ||
+ | icon:{ | ||
+ | url : 'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png', | ||
+ | origin : new google.maps.Point(0,0), //(アイコンセット用切り出し位置) | ||
+ | size : new google.maps.Size(64,64),//アイコンサイズ | ||
+ | scaledSize : new google.maps.Size(32, 32), //出力サイズ | ||
+ | anchor : new google.maps.Point(32,0) //中心座標(出力サイズ規準) | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | <script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap" async defer></script> | ||
+ | </code> | ||
+ | アイコン表示は下記の部分で行います。 | ||
+ | |||
+ | * origin・・・アイコンセットの場合に切り出し地点を指定します。1画像しかない場合は0,0です | ||
+ | * size・・・アイコンの原寸です。1画像しか無い場合は画像の幅と高さを与えます。アイコンセットから切り出す場合は切り出す大きさを指定します。 | ||
+ | * scaledSize・・・マップに出力するアイコンの大きさです。sizeと同じなら省略できます。 | ||
+ | * anchor・・・アイコンのどの位置を経度緯度と一致させるか決めます。0,0なら左上です。デモの場合は右上(32,0)になっています。 | ||
+ | |||
+ | <code javascript> | ||
+ | var marker = new google.maps.Marker({ | ||
+ | position: {lat: 35.6895326, lng: 139.6908937}, //表示座標 | ||
+ | map: map, | ||
+ | icon:{ | ||
+ | url : 'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png', | ||
+ | origin : new google.maps.Point(0,0), //(アイコンセット用切り出し位置) | ||
+ | size : new google.maps.Size(64,64),//アイコンサイズ | ||
+ | scaledSize : new google.maps.Size(32, 32), //出力サイズ | ||
+ | anchor : new google.maps.Point(32,0) //中心座標(出力サイズ規準) | ||
+ | } | ||
+ | }); | ||
+ | </code> | ||
+ | |||
+ | 下記のようにファイル名だけに省略する事が出来ますが、この場合は画像の底辺中央(例なら32,64)が中心座標になります。 | ||
+ | <code> | ||
+ | icon: 'https://www.achiachi.net/blog/lib/tpl/dokuwiki/images/logo.png' | ||
+ | </code> | ||
+ | |||