Infowindows顯示div div

我需要腳本當我點擊infowindow在谷歌地圖上，打開infowindow或打開infowidow內容顯示在HTML代碼中的一個div。Infowindows顯示div 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>

，所以我需要是這樣這樣的：

所以，當我上標記單擊它打開標準infowidow和infowidow在一個div的左側。

來源

2017-04-11 pHenomen

在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));

來源

2017-04-11 10:36:18

當我將這段代碼與當前的，它不會顯示所有的標記...... – pHenomen

包括jQuery的librarry您項目https://code.jquery.com/ –

Infowindows顯示div div

回答

相關問題