Googleマップのマーカーをクリックするとページを分割する方法は？

Question

私のマーカをクリックすると、ウィンドウが2つに分割されます。左のマップでは、マップの位置を特定し、右側に市場の配列内容を表示する必要がありますか？すでに準備のdivに特定の値を充填しながら

var locations = [ 
    [ 
      "clientDigital", 
      12.9965541, 80.2559071, 
      4, 
      "Steven F. Morris", 
      "Sandfiddler Pawn Shop", 
      "5429 Tidewater Dr.", 
      "found" 
     ], 
     [ 
      "Aubrica the Mermaid (nee: Aubry Alexis)", 
      36.8618, -76.203, 
      5, 
      "Myke Irving/ Georgia Mason", 
      "USAVE Auto Rental", 
      "Virginia Auto Rental on Virginia Beach Blvd", 
      "found" 
     ] 
    ] 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    // center: new google.maps.LatLng(-33.92, 151.25), 
    center: new google.maps.LatLng(36.8857, -76.2599), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 


    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0] + "<br />" + locations[i][4] + "<br />" + locations[i][5] + "<br />" + locations[i][6]); 
      infowindow.open(map, marker); 
     } 

    })(marker, i)); 
} 
</script> 
<div id="map" ></div> 

Answer 1

あなたは、あなたがマーカーをクリックの上に表示されたHTML部分に隠されたdiv要素を追加することができます。

私の例はマップの右側にはありませんが、これは少しのCSS（float：left;）で行うことができます。 私はまだそれを試したhaventが、これは私はそれが

var locations = [ 
    [ 
      "clientDigital", 
      12.9965541, 80.2559071, 
      4, 
      "Steven F. Morris", 
      "Sandfiddler Pawn Shop", 
      "5429 Tidewater Dr.", 
      "found" 
     ], 
     [ 
      "Aubrica the Mermaid (nee: Aubry Alexis)", 
      36.8618, -76.203, 
      5, 
      "Myke Irving/ Georgia Mason", 
      "USAVE Auto Rental", 
      "Virginia Auto Rental on Virginia Beach Blvd", 
      "found" 
     ] 
    ] 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    // center: new google.maps.LatLng(-33.92, 151.25), 
    center: new google.maps.LatLng(36.8857, -76.2599), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 


    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0] + "<br />" + locations[i][4] + "<br />" + locations[i][5] + "<br />" + locations[i][6]); 
      infowindow.open(map, marker); 

      //show singleMarkerValues-div 
      $('#singleMarkerValues').show(); 

      //insert specific values 
      $('#singleName').html(locations[i][0]); 
      $('#singleLatLng').html(locations[i][1]+', '+locations[i][2]); 
      $('#singlePerson').html(locations[i][3]); 
      ... 
     } 

    })(marker, i)); 
} 
</script> 


<div id="map"></div> 

<div id="singleMarkerValues" style="display: none;"> 
    <div id="singleName"></div> 
    <div id="singleLatLng"></div> 
    <div id="singlePerson"></div> 
    .... 
</div> 

Answer 2

あなたはdiv要素のサイズを変更するあなたのマーカーにクリックリスナを配置する必要があり、コール・マップは、サイズを変更し、右側の「データ」を表示するだろう方法です。

リスナーは、マップは、マップのインスタンスであり、あなたが地図のdivと私はデモのために、このfiddleを持っているあなたの配列

が含まれていますデータのdivを持ってこの

marker.addListener('click', function() { 
      map.setCenter(marker.getPosition()); 
       document.getElementById("map").style.width = "50%"; 
       google.maps.event.trigger(map, 'resize') 
       map.setCenter(marker.getPosition()); 
       document.getElementById("data").style.display = "inline"; 
       document.getElementById("data").innerHTML = locations.toString(); 
      }); 

のように見えるshoud。

私はデータをフォーマットしませんでした。

希望します。