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

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

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

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

Q&A

解決済

googlemapのマーカーをクリックした際に情報ウィンドウが出るようにしたい

ry_xxx
ry_xxx

総合スコア19

JavaScript

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

1回答

1グッド

1クリップ

8467閲覧

投稿2017/03/16 16:34

編集2017/03/16 16:38

googlemapのマーカーをクリックした際に情報ウィンドウが出るようにしたいのですが、
JavaScriptやGoogle Map apiを使用しGoogleマップにピンを立て、クリックした際に情報ウィンドウを一つ表示させたいと思っております。

下記のソースコードが紹介されていたので、試してみたところ、ピンを一つ押すとすべての情報ウィンドウが開いてしまいます。
押したピンの情報ウィンドウのみ開きたいのですが、どのようにカスタマイズしたら開くのでしょうか。
おそらく、下記の部分が原因かと思われますが分かりませんでした。
どうかご教授して頂きますよう宜しくお願い致します。

原因と思われる部分

javaScript

1 google.maps.event.addListener(marker[i], 'click', function(e) { 2 for(var i = 0; i < markers.length; i++) { 3 if(marker[i].position.G == e.latLng.G && marker[i].position.K == e.latLng.K) { 4 //クリックしたマーカーだったら詳細を表示 5 infoWindow[i].open(map, marker[i]); 6 } else { 7 //クリックしたマーカーでなければ詳細を閉じる 8 infoWindow[i].close(); 9 } 10 } 11 }); 12

試してみたソースコード

JavaScript

1/* map関係のオブジェクトをグローバルで定義 */ 2var markers = [], 3 marker = [], 4 infoWindow = [], 5 map = {}; 6 7function initialize() { 8 var mapOptions = { 9 center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標 10 zoom: 16 //Mapのズーム 11 }; 12 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Mapを表示する要素のIDを指定してMapを読み込み 13 14 15 /* マーカーの情報を設定 */ 16 markers = [ 17 { 18 position: new google.maps.LatLng(35.712213, 139.706726), 19 title: 'ロケーション1', 20 summary: '説明が入ります説明が入ります説明が入ります', 21 figure: 'images/figure01.jpg' 22 }, 23 { 24 position: new google.maps.LatLng(35.712518, 139.708085), 25 title: 'ロケーション2', 26 summary: '説明が入ります説明が入ります説明が入ります', 27 figure: 'images/figure02.jpg' 28 }, 29 { 30 position: new google.maps.LatLng(35.712449, 139.705825), 31 title: 'ロケーション3', 32 summary: '説明が入ります説明が入ります説明が入ります', 33 figure: 'images/figure03.jpg' 34 }, 35 { 36 position: new google.maps.LatLng(35.713205, 139.705060), 37 title: 'ロケーション4', 38 summary: '説明が入ります説明が入ります説明が入ります', 39 figure: 'images/figure04.jpg' 40 }, 41 { 42 position: new google.maps.LatLng(35.713478, 139.707359), 43 title: 'ロケーション5', 44 summary: '説明が入ります説明が入ります説明が入ります', 45 figure: 'images/figure05.jpg' 46 } 47 ]; 48 49 /* マーカーのアイコンの設定 */ 50 var image = { 51 url: "images/mark.png", //画像のURL 52 size: new google.maps.Size(32, 32), //サイズ 53 origin: new google.maps.Point(0, 0), //アイコンの基準位置 54 anchor: new google.maps.Point(16, 32), //アイコンのアンカーポイント 55 scaledSize: new google.maps.Size(32, 32) //アイコンのサイズ 56 }; 57 58 59 /* マーカの実装 */ 60 for(var i = 0; i < markers.length; i++){ 61 marker[i] = new google.maps.Marker({ 62 position: markers[i].position, 63 map: map, 64 icon: image, 65 title: markers[i].title, 66 zIndex: markers.length - i 67 }); 68 69 /* 場所の詳細の準備 */ 70 infoWindow[i] = new google.maps.InfoWindow({ 71 content: '<section style="margin-top:5px;"><figure style="float: left;"><img src="' + markers[i].figure + '" width="64px"></figure><div style="margin-left: 74px;"><h2 style="margin-bottom: 5px;font-size: 1.17em;">' + markers[i].title + '</h2><p style="font-size: 0.84em;">' + markers[i].summary + '</p></div></section>' 72 }); 73 74 /* マーカーをクリックしたら場所の詳細を表示 */ 75 google.maps.event.addListener(marker[i], 'click', function(e) { 76 for(var i = 0; i < markers.length; i++) { 77 if(marker[i].position.G == e.latLng.G && marker[i].position.K == e.latLng.K) { 78 //クリックしたマーカーだったら詳細を表示 79 infoWindow[i].open(map, marker[i]); 80 } else { 81 //クリックしたマーカーでなければ詳細を閉じる 82 infoWindow[i].close(); 83 } 84 } 85 }); 86 } 87} 88 89google.maps.event.addDomListener(window, 'load', initialize); //Google Map APIの実行
Daimian👍を押しています

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

こちらのサイトで詳しく出てます。
http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

投稿2017/03/16 16:42

shaak

総合スコア607

kei344, ry_xxx👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ry_xxx

2017/03/17 01:21

無事解決致しました!ありがとうございます!大変助かりました。 紹介頂いたサイトのソースを少しカスタマイズさせて頂きました! 今後とも宜しくお願い致します。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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