Google Map API позиционирование списка и веб-ссылки

Question

В настоящее время я работаю над картой с несколькими маркерами.Под картой находится интерактивный список, который при нажатии переходит к соответствующему маркеру и отображает информационное окно для маркера.В чем я хотел бы помочь, так это в том, чтобы переместить список так, чтобы он находился рядом с картой с левой стороны, а не снизу.Я хотел бы сделать список прокручиваемым, так как я буду добавлять больше маркеров и, следовательно, буду увеличивать список.Второе, что мне нужно, это ссылки внутри каждого информационного окна.В настоящее время, когда ссылка нажата, она открывается внутри карты, а не в новой вкладке, что мне и нужно.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  var gmarkers = [];
  function initialize() {
    var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(52.482615, -1.911246),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);

    var locations = [
      ['BMW<br>Address<br>Postcode<br>City<br><a href="https://www.sytnerbirminghambmw.co.uk/">Website</a>', 52.482615, -1.911246],
      ['Audi<br>Address<br>Postcode<br>City<br><a href="https://listers.co.uk/audi/birmingham">Website</a>', 52.3930665, -1.813306],
      ['Mercedes<br>Address<br>Postcode<br>City<br><a href="https://www.lshauto.co.uk/locations/1769/mercedes-benz-of-birmingham-central/">Website</a>', 52.4797319, -1.8775606],
      ['Porsche<br>Address<br>Postcode<br>City<br><a href="https://www.sytner.co.uk/porsche/dealer-locator/porsche-centre-solihull/">Website</a>', 52.391564, -1.803235],
      ['Ferrari<br>Address<br>Postcode<br>City<br><a href="https://birmingham.ferraridealers.com/en_gb/">Website</a>', 52.3916807, -1.8053753],
      ['Lamborghini<br>Address<br>Postcode<br>City<br><a href="https://www.birmingham.lamborghini/en">Website</a>', 52.5082516, -1.8182291]
    ];

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

    google.maps.event.addListener(map, "click", function() {
      infowindow.close();
    });

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

      google.maps.event.addListener(
        marker,
        "click",
        (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          };
        })(marker, i)
      );
    }
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br />

Вот jsfiddle кода

Answer 1

Сделайте карту 50% ширины страницы (или любого другого размера).Плавающая боковая панель справа, с overflow: auto.

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

подтверждение концепции скрипта

фрагмент кода:

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  var gmarkers = [];

  function initialize() {

    var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(52.482615, -1.911246),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


    var locations = [
      ['BMW<br>Address<br>Postcode<br>City<br><a href="https://www.sytnerbirminghambmw.co.uk/">Website</a>', 52.482615, -1.911246],
      ['Audi<br>Address<br>Postcode<br>City<br><a href="https://listers.co.uk/audi/birmingham">Website</a>', 52.3930665, -1.813306],
      ['Mercedes<br>Address<br>Postcode<br>City<br><a href="https://www.lshauto.co.uk/locations/1769/mercedes-benz-of-birmingham-central/">Website</a>', 52.4797319, -1.8775606],
      ['Porsche<br>Address<br>Postcode<br>City<br><a href="https://www.sytner.co.uk/porsche/dealer-locator/porsche-centre-solihull/">Website</a>', 52.391564, -1.803235],
      ['Ferrari<br>Address<br>Postcode<br>City<br><a href="https://birmingham.ferraridealers.com/en_gb/">Website</a>', 52.3916807, -1.8053753],
      ['Lamborghini<br>Address<br>Postcode<br>City<br><a href="https://www.birmingham.lamborghini/en">Website</a>', 52.5082516, -1.8182291]
    ];



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


    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });


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


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="sidebar">
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
</div>
<div id="googlemap"></div>