Question

当我点击google地图上的infowindow时，我需要脚本，打开infowindow或打开的infowidow节目的内容在html代码的一个div中。

这是我的代码：

    var locations = [
      ['<h1> Sarajevo </h1>'+ // Grad
       '<h2> KLIJENTI:</h2>'+
       '<ul><li>'+
       '<h3> Microsoft Coorporation </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '</ul> ',43.8562590,18.4130760, 4],

       ['<h1> Tuzla </h1>'+ // Grad
       '<h2> KLIJENTI:</h2>'+
       '<ul><li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '</ul> ',44.5374610,18.6734690, 4],

       ['<h1> Zenica </h1>'+ // Grad
       '<h2> KLIJENTI:</h2>'+
       '<ul><li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '</ul> ',44.2034390,17.9077430, 4],

       ['<h1> Mostar </h1>'+ // Grad
       '<h2> KLIJENTI:</h2>'+
       '<ul><li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '</ul> ',43.3437750,17.8077580, 4],

       /*['<h1> SARAJEVO </h1>'+ // Grad
       '<h2> KLIJENTI:</h2>'+
       '<ul><li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+  // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '<li>'+
       '<h3> Firma XY </h3>'+ // Ime firme
       '<p> Adresa: Neka Adresa br 1 </p>'+ // Adresa firme
       '<p> Telefon: 061/123-456</p> </li>'+ // Telefon firme
       '</ul> ',43.3437750,17.8077580, 4], */ 

       // KOPIRATI KOD IZNAD ZA DODAVANJE NOVIH LOKACIJA | KOPIRATI ISKLJUČIVO IZMEĐU /* i */ znakova.
       // Koristiti slijedeći link za pronalađenje koordinata adresa, i gradova: http://mygeoposition.com/

    ];


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(43.9158860,17.6790760),
      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]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    *{
    padding:0;
    margin:0;}

    ::-webkit-scrollbar {width: 6px;}
    ::-webkit-scrollbar-track {background-color:#fafafa;}
    ::-webkit-scrollbar-thumb {background: #3cb5f9;}
    ::-webkit-scrollbar-thumb:hover{background: #35A4E4;}   
    ::-webkit-scrollbar-thumb:window-inactive {background: #3cb5f9;}

    #map{
    width:100%;
    height:100vh;}

    .flex{
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    justify-content:space-between;}

    .col:first-child{width:25%; background:#2B2F33;}
    .col:nth-child(2){width:75%;}

    #Title{
    position:relative;
    padding:5%;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    height:4vh;
    background:#6DCCEE;}

    #Title h1{
    width:100%;
    background:none;
    text-align:center;
    font-size:4vh;
    color:#fafafa;}

    .col:first-child p{
    background:#6DCCEE;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    font-size:2vh;
    line-height:5vh;
    color:#fafafa;}

    .col:first-child img{
    padding-left:25%;
    padding-right:25%;
    padding-top:10%;
    padding-bottom:10%;
    width:50%;}

    h1{
    font-size:2.5vh;
    line-height:5vh;
    color:#2B2F33;
    text-align:left;}

    h2{
    font-size:2.5vh;
    padding:1vh;
    line-height:5vh;
    color:#3cb5f9;
    text-align:left;}

    ul{margin-right:50px;}
    ul li{margin-bottom:1vh;}
    ul li p{line-height:2.5vh;}

 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div class="flex">
    <div class="col">
        <div id="Title"> <h1> NASLOV PROJEKTA</h1> </div>
        <img src="img/Logo.png">
    </div>
    <div class="col">
         <div id="map"></div>
    </div>
    </div>

所以我需要像这样：

所以，当我点击标记时，它会在一个div的左侧打开标准infowidow和infowidow。

Answer 1

你的HTML代码中的

 <div class="col">
    <div id="Title"> <h1> NASLOV PROJEKTA</h1> </div>
    <img src="img/Logo.png">
    <div id="content-container"></div>
</div>

你的js代码

 google.maps.event.addListener(marker, 'click', (function(marker, i) {
    $("#content-container").html(locations[i][0]);
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

Infowindows以div显示

1 个答案: