###前提・実現したいこと
Google Maps JavaScript APIを用いてkmlファイルを個人ページに
読み込み、nameにある情報(ここでは氏名)をラベルに表示したい
環境:Chrome等のブラウザ
###現状
まずExcelファイルをGoogleMapにインポートしてマイマップを作り、kmlファイルをダウンロードすることで、最終的にこちらのサイトにある様に、個人のページでGoogleMapを表示することまでは出来ました。
しかし、各マーカー横にラベルを表示することが出来ません。
マイマップでは「均一スタイル>ラベルを設定>名前」とすることで、各マーカーの横にnameに格納されている文字列をラベルに表示することが可能でした。
どなたか、ご教授願います。
###Htmlファイル
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 30.123456, lng: 123.456789}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.○○○.com/list.kml',
map: map
});
}
</body> </html></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=ApiCode&signed_in=true&callback=initMap"> </script>
※実際のコードには取得したAPICODEを記述してあります。
###Kmlファイル
<?xml version="1.0" encoding="utf-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <name>KmlFile</name> <Style id="s_ylw-pushpin"> <IconStyle> <scale>1.1</scale> <Icon> <href>http://maps.google.com/mapfiles/kml/paddle/red-diamond.png</href> </Icon> <hotSpot x="32" y="1" xunits="pixels" yunits="pixels" /> </IconStyle> <scale>2.0</scale> </Style> <StyleMap id="m_ylw-pushpin"> <Pair> <key>normal</key> <styleUrl>#s_ylw-pushpin</styleUrl> </Pair> <Pair> <key>highlight</key> <styleUrl>#s_ylw-pushpin_hl</styleUrl> </Pair> </StyleMap> <Style id="s_ylw-pushpin_hl"> <IconStyle> <scale>1.3</scale> <Icon> <href>http://maps.google.com/mapfiles/kml/paddle/red-diamond.png</href> </Icon> <hotSpot x="32" y="1" xunits="pixels" yunits="pixels" /> </IconStyle> <scale>2.0</scale> </Style> <Folder> <name>123</name> <open>1</open> <Placemark> <name>荒井 慶一</name> <address>東京都1000-1000-1</address> <description>090-0000-0000</description> <LookAt> <longitude>123</longitude> <latitude>321</latitude> <altitude>0</altitude> <range>1000</range> <tilt>0</tilt> <heading>0</heading> </LookAt> <Point> <coordinates>123.456789</coordinates> </Point> <styleUrl>#m_ylw-pushpin</styleUrl> </Placemark> </Folder> </Document> </kml>あなたの回答
tips
プレビュー