当我点击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。
答案 0 :(得分:0)
<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));