0
Ich brauche Skript, wenn ich auf Infowindow auf Google Map klicke, das Infowindow geöffnet oder den Inhalt der geöffneten Infowidow in einem div in HTML-Code anzeigen.Infofenster Anzeige in div
Hier ist mein Code:
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>
Also, wenn ich auf Markierung klicken öffnet es Standard infowidow und infowidow auf der linken Seite in einem div.
Wenn ich diesen Code mit Strom ersetzen, es nicht alle des Markers zeigt ... – pHenomen
umfassen jquery librarry auf Ihre Projekt https://code.jquery.com/ –