質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2344閲覧

Google Maps API で読み込んだ地図にラベルを表示したい

elvis

総合スコア29

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/12/29 06:51

###前提・実現したいこと
Google Maps JavaScript APIを用いてkmlファイルを個人ページに
読み込み、nameにある情報(ここでは氏名)をラベルに表示したい

環境:Chrome等のブラウザ

###現状
まずExcelファイルをGoogleMapにインポートしてマイマップを作り、kmlファイルをダウンロードすることで、最終的にこちらのサイトにある様に、個人のページでGoogleMapを表示することまでは出来ました。

しかし、各マーカー横にラベルを表示することが出来ません。
マイマップでは「均一スタイル>ラベルを設定>名前」とすることで、各マーカーの横にnameに格納されている文字列をラベルに表示することが可能でした。

下の図のように表示したいです。
イメージ説明
イメージ説明※仮名

どなたか、ご教授願います。
###Htmlファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <title>KML Layers</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script>

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
});
}

</script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=ApiCode&signed_in=true&callback=initMap"> </script>
</body> </html>

※実際のコードには取得した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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問