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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

Google マップ

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

Q&A

解決済

1回答

4693閲覧

Google Mapの情報ウインドウを常にひとつだけ表示したい

17dez

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2016/04/07 04:36

###前提
Wordpress&ACF(Advanced Custom Fields)でGoogle Mapをサイト上に表示しています。
参考にしたのは、こちらのサンプルコードです。
https://www.advancedcustomfields.com/resources/google-map/

HTML

1<style type="text/css"> 2 3.acf-map { 4 width: 100%; 5 height: 400px; 6 border: #ccc solid 1px; 7 margin: 20px 0; 8} 9 10/* fixes potential theme css conflict */ 11.acf-map img { 12 max-width: inherit !important; 13} 14 15</style> 16<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

PHP

1<?php if( have_rows('locations') ): ?> 2 <div class="acf-map"> 3 <?php while ( have_rows('locations') ) : the_row(); 4 5 $location = get_sub_field('location'); 6 7 ?> 8 <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 9 <h4><?php the_sub_field('title'); ?></h4> 10 <p class="address"><?php echo $location['address']; ?></p> 11 <p><?php the_sub_field('description'); ?></p> 12 </div> 13 <?php endwhile; ?> 14 </div> 15<?php endif; ?>

Javascript

1(function($) { 2 3/* 4* new_map 5* 6* This function will render a Google Map onto the selected jQuery element 7* 8* @type function 9* @date 8/11/2013 10* @since 4.3.0 11* 12* @param $el (jQuery element) 13* @return n/a 14*/ 15 16function new_map( $el ) { 17 18 // var 19 var $markers = $el.find('.marker'); 20 21 22 // vars 23 var args = { 24 zoom : 16, 25 center : new google.maps.LatLng(0, 0), 26 mapTypeId : google.maps.MapTypeId.ROADMAP 27 }; 28 29 30 // create map 31 var map = new google.maps.Map( $el[0], args); 32 33 34 // add a markers reference 35 map.markers = []; 36 37 38 // add markers 39 $markers.each(function(){ 40 41 add_marker( $(this), map ); 42 43 }); 44 45 46 // center map 47 center_map( map ); 48 49 50 // return 51 return map; 52 53} 54 55/* 56* add_marker 57* 58* This function will add a marker to the selected Google Map 59* 60* @type function 61* @date 8/11/2013 62* @since 4.3.0 63* 64* @param $marker (jQuery element) 65* @param map (Google Map object) 66* @return n/a 67*/ 68 69function add_marker( $marker, map ) { 70 71 // var 72 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); 73 74 // create marker 75 var marker = new google.maps.Marker({ 76 position : latlng, 77 map : map 78 }); 79 80 // add to array 81 map.markers.push( marker ); 82 83 // if marker contains HTML, add it to an infoWindow 84 if( $marker.html() ) 85 { 86 // create info window 87 var infowindow = new google.maps.InfoWindow({ 88 content : $marker.html() 89 }); 90 91 // show info window when marker is clicked 92 google.maps.event.addListener(marker, 'click', function() { 93 94 infowindow.open( map, marker ); 95 96 }); 97 } 98 99} 100 101/* 102* center_map 103* 104* This function will center the map, showing all markers attached to this map 105* 106* @type function 107* @date 8/11/2013 108* @since 4.3.0 109* 110* @param map (Google Map object) 111* @return n/a 112*/ 113 114function center_map( map ) { 115 116 // vars 117 var bounds = new google.maps.LatLngBounds(); 118 119 // loop through all markers and create bounds 120 $.each( map.markers, function( i, marker ){ 121 122 var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() ); 123 124 bounds.extend( latlng ); 125 126 }); 127 128 // only 1 marker? 129 if( map.markers.length == 1 ) 130 { 131 // set center of map 132 map.setCenter( bounds.getCenter() ); 133 map.setZoom( 16 ); 134 } 135 else 136 { 137 // fit to bounds 138 map.fitBounds( bounds ); 139 } 140 141} 142 143/* 144* document ready 145* 146* This function will render each map when the document is ready (page has loaded) 147* 148* @type function 149* @date 8/11/2013 150* @since 5.0.0 151* 152* @param n/a 153* @return n/a 154*/ 155// global var 156var map = null; 157 158$(document).ready(function(){ 159 160 $('.acf-map').each(function(){ 161 162 // create map 163 map = new_map( $(this) ); 164 165 }); 166 167}); 168 169})(jQuery); 170</script>

###実現したいこと
こちらのコードを用いて、複数マーカーとそれぞれの情報ウインドウを表示させることまではできましたが、残念ながらこれだと情報ウインドウが複数同時に開いてしまいます。
マーカーが多く見づらいので、できれば地図上に表示される情報ウインドウは一つにしたいと思ってます。

###試したこと
他のサイトを参考にコードを追加してみましたが、やはりinfoWindowは閉じてくれません。

Javascript

1function add_marker( $marker, map ) { 2 3 // var 4 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); 5 6 // create marker 7 var marker = new google.maps.Marker({ 8 position : latlng, 9 map : map 10 }); 11 12 // add to array 13 map.markers.push( marker ); 14 15 // if marker contains HTML, add it to an infoWindow 16 if( $marker.html() ) 17 { 18 // create info window 19 var infowindow = new google.maps.InfoWindow({ 20 content : $marker.html() 21 }); 22 23 // show info window when marker is clicked 24 google.maps.event.addListener(marker, 'click', function() { 25 26 if ( CurrentWindow ) { 27 CurrentWindow.close(); 28 } 29 infowindow.open( map, marker ); 30 CurrentWindow = infowindow; 31 32 }); 33 } 34 35}

ひとつの情報ウインドウのみ表示するには、どうカスタマイズしたらいいのでしょうか?
どなたかご教授いただけたら幸いです。よろしくお願いします。

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

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

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

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

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

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

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答1

0

ベストアンサー

こんな感じかな。

JavaScript

1// create info window 2var infowindow = new google.maps.InfoWindow(); 3 4function add_marker( $marker, map ) { 5 6 // var 7 var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') ); 8 9 // create marker 10 var marker = new google.maps.Marker({ 11 position : latlng, 12 map : map 13 }); 14 15 // add to array 16 map.markers.push( marker ); 17 18 // if marker contains HTML, add it to an infoWindow 19 if ( $marker.html() ) { 20 21 // show info window when marker is clicked 22 google.maps.event.addListener( marker, 'click', ( function( marker, html ) { 23 return function() { 24 infowindow.setContent( html ); 25 infowindow.open( map, marker ); 26 } 27 })( marker, $marker.html() )); 28 } 29 30}

投稿2016/04/07 04:59

kei344

総合スコア69248

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

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

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

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

17dez

2016/04/07 10:39

大変助かりました。ありがとうございました! (function() { // … })(); これを理解するまで時間がかかりましたが…汗。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

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

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

質問する

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

Google マップ

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