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

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

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

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

Google マップ

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

Q&A

0回答

2059閲覧

Google Mapsにおいて、ピンと連携させたサイドバーを実装するには!!

Shinog

総合スコア99

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2015/09/15 03:18

はじめまして!
現在以下の記事(ページ)を参考に、ピンと連携させたサイドバーを実装しようと考えています。

http://waox.main.jp/news/maps/v3/example/map-xml-demo-sidebar2.html

上記のページだと、サイドバーをクリックすることでそれに対応するピンの情報が出てくるように実装されていますが、今回サイドバーにカーソルを会わせる(mouseoverなど?)とそれに対応するピンが変わる(ピンの色・ピン自体なんでも構いません)ように実装し直したいと考えているのですが、なかなか上手くいきません。

このような場合、下記のコードを具体的にどのように実装し直せばよいでしょうか?
何かお分かりの方は、是非ともご教授のほどよろしくお願い申し上げます。

javascript

1<script type="text/javascript"> 2 var center = new google.maps.LatLng(35.67849, 139.39178); 3 var zoom = 10; 4 var mapTypeId = google.maps.MapTypeId.ROADMAP 5</script> 6<script type="text/javascript"> 7//<![CDATA[ 8var markers = []; 9var sidebarhtml = ''; 10 11 12function initialize() { 13 var map = new google.maps.Map(document.getElementById("map_canvas"), { 14 center: center, 15 zoom: zoom, 16 mapTypeId: mapTypeId 17 }); 18 19 downloadUrl("http://URL/test.xml", function(data){ 20 var xmlDoc = xmlParse(data); 21 var markers = xmlDoc.getElementsByTagName("marker"); 22 for (var i = 0; i < markers.length; i++){ 23 var point = new google.maps.LatLng( 24 parseFloat(markers[i].getAttribute("lat")), 25 parseFloat(markers[i].getAttribute("lng"))); 26 var name = markers[i].getAttribute("name"); 27 var explanation = markers[i].getAttribute("explanation"); 28 var category = markers[i].getAttribute("category"); 29 var linkurl = markers[i].getAttribute("linkurl"); 30 var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br>'+explanation+'</b><br>'+linkurl+'</b>' + 31 '<form action="http://maps.google.co.jp/maps" method="get" target="_blank">' + 32 '<input value="ここへのルート検索" type="submit">' + 33 '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 34 '"/>' ; 35 sidebarhtml += '<table border="1" cellspacing="2" cellpadding="2" id="HPB_TABLE_2_A_101114020233" class="hpb-cnt-tb1"> \ 36 <thead> \ 37 <tr> \ 38 <td class="hpb-cnt-tb-cell2" width="220"><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \ 39 </tr> \ 40 </thead> \ 41 <tbody>'; 42 createMarker(point,html,map,category,name); 43 } 44 document.getElementById("side_bar").innerHTML = sidebarhtml; 45 }); 46 47 } 48 function createMarker(point,html,map,category,name){ 49 50 var customIcons = { 51 kouen: { 52 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png', 53 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png' 54 }, 55 onsen: { 56 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png', 57 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png' 58 }, 59 doubutsu: { 60 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png', 61 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.shadow.png' 62 } 63 }; 64 var icon = customIcons[category] || {}; 65 var marker = new google.maps.Marker({ 66 map: map, 67 position: point, 68 icon: icon.icon, 69 shadow: icon.shadow, 70 title: name 71 }); 72 73 markers.push(marker); 74 google.maps.event.addListener(marker, 'click', function() { 75 76 infoWindow.close(); 77 infoWindow.setContent(html); 78 infoWindow.open(map,marker); 79 map.panTo(point); 80 }); 81} 82var infoWindow = new google.maps.InfoWindow(); 83function myclick(num) 84{ 85google.maps.event.trigger(markers[num], "click"); 86} 87 88 89//]]> 90</script> 91

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問