Wordpress：Googleマップ複数のマーカーがサイドバーのアコーディオンのリンクに変わる

Question

私はjupiterのテーマとビジュアルコンポーザーを使ってwordpressを使って、自分の街で行うことのオンラインアジェンダを構築しています。

すべての会場がある数回のクリックでページが表示されます。私がやろうとしている何

は左手側のアコーディオンと右手側のマップ（グーグルマップを？）持っていることです。 アコーデオンは、会場をカテゴリ（劇場、音楽会場、展示会など）に分割します。たとえば「シアター」をクリックすると、下のすべての劇場の名前と地図上のさまざまなマーカーの場所が表示されます。 地図上のマーカーは、クリックするアコーディオンのカテゴリに応じて変更され、適応されます。

それはちょっとのようなものだ：「suivant」をクリックするとhttp://www.xn--bilan-de-comptences-nzb.fr/listing.php?region=aquitaine&departement=33&ville_cp=33000&page=1 、それは他のページに移動します。私は多かれ少なかれ同じことを一つのページにしたいと思っています。

HTMLとCSSは問題ではありません、私はどのようにPHPとMySQLの仕事を知っているが、私は専門家です。私はjavascriptとjqueryの知識はほとんど持っていません。

あなたの時間と助けてくれてありがとう！

Answer 1

私は以前のマップと同様のコードを開発しました。必要に応じて遊び、テーブルを操作することができます。

<div id="map_canvas" style="width:auto;height:500px"> 

このdivは、マップを追加するページまたはセクションの内側に追加します。使用VC html要素とあなたが望むような寸法を変更します**

「Maps.js」というファイルを作成し、次のコードが含まれます。

サイトhttp://www.latlong.net/を使用すると、緯度は&になります。あなたの場所に応じて細部の詳細とvarマーカー情報が変更されます。 WordPressテーマインストールフォルダのjsフォルダにjsファイルを保存することを思い出してください。

どうすればいいか教えてください！

jQuery(function($) { 
     // Asynchronously Load the map API 
     var script = document.createElement('script'); 
     script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    }); 

    function initialize() { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 
     var mapOptions = { 
      mapTypeId: 'roadmap' 
     }; 

     // Display a map on the page 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     map.setTilt(45); 

     // Multiple Markers 
     var markers = [ 
      ['Church Cross' , 6.027207, 80.216655], 
      ['Middle Street', 6.027960, 80.216687], 
      ['Lighthouse Street' , 6.026529, 80.216688] 
      ['Court Square' , 6.027110, 80.219057] 
     ]; 

     // Info Window Content 
     var infoWindowContent = [ 
      ['<div class="info_content">' + 
      '<b>Church Cross</b><br><br>' + 
      '<p>No: 9,</p><p>Church Cross St,</p><p>Galle,</p><p>Sri Lanka.</p>' +  '</div>'], 
      ['<div class="info_content">' + 
      '<b>Middle Street</b><br><br>' + 
      '<p>No.5, Middle Street,</p><p>Galle,</p><p>Sri Lanka.</p>' + 
      '</div>'], 
      ['<div class="info_content">' + 
      '<b>Lighthouse Street</b><br><br>' + 
      '<p>No.5, Middle Street,</p><p>Galle,</p><p>Sri Lanka.</p>' + 
      '</div>'] 
      ['<div class="info_content">' + 
      '<b>Court Square</b><br><br>' + 
      '<p>No.1, Court Square,</p><p>Galle,</p><p>Sri Lanka.</p>' + 
      '</div>'] 
     ]; 

     // Display multiple markers on a map 
     var infoWindow = new google.maps.InfoWindow(), marker, i; 

     // Loop through our array of markers & place each one on the map 
     for(i = 0; i < markers.length; i++) { 
      var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
      bounds.extend(position); 
      marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: markers[i][0] 
      }); 

      // Allow each marker to have an info window  
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infoWindow.setContent(infoWindowContent[i][0]); 
        infoWindow.open(map, marker); 
       } 
      })(marker, i)); 

      // Automatically center the map fitting all markers on the screen 
      map.fitBounds(bounds); 
     } 

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      this.setZoom(17); 
      google.maps.event.removeListener(boundsListener); 
     }); 

    }