Как разбить страницу при нажатии маркера на Картах Google?

Question

если я нажму маркер, мое окно должно разделиться на две части, где левая сторона должна располагаться на карте, а правая сторона должна показывать содержимое массива на рынке?

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

Вы можете добавить скрытый DIV в HTML части, что вы показываете на клик по маркеру, при заполнении конкретных значений в уже подготовленных див.

Мой пример не будет на правой стороне карты, но это можно сделать с помощью небольшого CSS (float: left;). я гавань пробовал еще, но это, как я бы это сделать

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, карта вызова изменять размер и отображать «данные» о праве ,

Слушатель Шоуда выглядеть следующим образом

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(); 
      }); 

Где карта является экземпляром карты и у вас есть карта DIV и ДИВЫ данные, которые будут содержать массив

У меня есть эта fiddle для демонстрации.

Я не форматировал данные.

Надеюсь, что это поможет