이 Google지도 정보창의 스타일을 지정하려면 어떻게해야합니까?

Question

나는 다음과 같은 자바 스크립트가 다음 생산

<!--Google Maps Script--> 
 
<script type="text/javascript"> 
 
    var locations = [ 
 
     ["1 Severn", 45.489886, -73.595116], 
 
     ["16 Grenville", 45.486391, -73.607096], 
 
     ["17 Winchester", 45.477646, -73.603917], 
 
     ["19 Winchester", 45.477607, -73.603962], 
 
     ["52 Brookfield", 45.514604, -73.632722], 
 
     ["317 Chemin du Golf", 45.467418, -73.548665], 
 
     ["319 Chemin du Golf", 45.467418, -73.548665], 
 
     ["447 Mt. Stephen", 45.483900, -73.600203], 
 
     ["449 Mt. Stephen", 45.483933, -73.600179], 
 
     ["603 Lansdowne", 45.484876, -73.609120], 
 
     ["649 Belmont", 45.485654, -73.609270], 
 
     ["652 Roslyn", 45.484788, -73.611407], 
 
     ["1235 Bishop", 45.496458, -73.575373], 
 
     ["1355 Scarboro", 45.523431, -73.639453], 
 
     ["2184 De Cologne", 45.515823, -73.704550], 
 
     ["2302 Brookfield", 45.514738, -73.632688], 
 
     ["3013 De Breslay", 45.492288, -73.590195], 
 
     ["3019 De Breslay", 45.492092, -73.590437], 
 
     ["3021 Jean Girard", 45.493183, -73.590212], 
 
     ["3025 De Breslay", 45.492075, -73.590771], 
 
     ["4389 Decarie", 45.480705, -73.620274] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 12, 
 
     center: new google.maps.LatLng(45.484876, -73.609120), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     scrollwheel: false 
 
    }); 
 

 
    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)); 
 
    } 
 
</script> 
 
<!--End Google Maps Script-->

: http://lexis250.github.io/groupecopley/map/

내 정보 창 (핀을 클릭하면 팝업 창을) ​​스타일 싶습니다 그렇게 제목, 이미지 및 링크가 있음을 나타냅니다. 어떻게이 일을 할 수 있습니까? 당신이

이 필요하지만이 같은 코드이 줄을 HTML 태그를 추가 할 수 있습니다 어떤 스타일

Answer 1

하나의 옵션 : 위치 배열에 제목과 설명을 추가

// address, latitude, longitude, title,  description 
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"], 
    ... 

그런 다음 거기에서 정보창에 넣어.

var locations = [ 
 
     ["1 Severn", 45.489886, -73.595116, "first title", "description 0<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, fermentum eu venenatis sed, aliquet in tortor. Etiam urna turpis, varius sed cursus vel, pretium eget sapien. Vestibulum ut vehicula nisi, ultricies pretium lectus. Praesent elementum lacus a purus cursus, quis laoreet risus semper. Morbi condimentum pellentesque tortor, eget dictum ligula cursus sit amet. Vestibulum fermentum, tellus non aliquam tristique, ligula neque eleifend nisl, nec condimentum sapien magna id tellus. Mauris commodo at nibh in hendrerit. Nunc lacinia lobortis pellentesque. Curabitur quis tincidunt ligula. Sed vel vestibulum lorem. Aliquam nec porttitor dolor. Suspendisse potenti. Sed et vestibulum ipsum, nec ullamcorper leo. Mauris mollis pellentesque arcu. Etiam et sem dictum augue bibendum pretium. Donec id justo orci."], 
 
     ["16 Grenville", 45.486391, -73.607096, "second title", "description 1"], 
 
     ["17 Winchester", 45.477646, -73.603917, "third title", "description 2"], 
 
     ["19 Winchester", 45.477607, -73.603962, "fourth title", "description 3"], 
 
     ["52 Brookfield", 45.514604, -73.632722, "fifth title", "description 4"], 
 
     ["317 Chemin du Golf", 45.467418, -73.548665, "sixth title", "description 5"], 
 
     ["319 Chemin du Golf", 45.467418, -73.548665, "seventh title", "description 6"], 
 
     ["447 Mt. Stephen", 45.483900, -73.600203, "8th title", "description 7"], 
 
     ["449 Mt. Stephen", 45.483933, -73.600179, "9th title", "description 8"], 
 
     ["603 Lansdowne", 45.484876, -73.609120, "10th title", "description 9"], 
 
     ["649 Belmont", 45.485654, -73.609270, "12th title", "description 10"], 
 
     ["652 Roslyn", 45.484788, -73.611407, "13th title", "description 11"], 
 
     ["1235 Bishop", 45.496458, -73.575373, "14th title", "description 12"], 
 
     ["1355 Scarboro", 45.523431, -73.639453, "15th title", "description 13"], 
 
     ["2184 De Cologne", 45.515823, -73.704550, "16th title", "description 14"], 
 
     ["2302 Brookfield", 45.514738, -73.632688, "17th title", "description 15"], 
 
     ["3013 De Breslay", 45.492288, -73.590195, "18th title", "description 16"], 
 
     ["3019 De Breslay", 45.492092, -73.590437, "19th title", "description 17"], 
 
     ["3021 Jean Girard", 45.493183, -73.590212, "20th title", "description 18"], 
 
     ["3025 De Breslay", 45.492075, -73.590771, "21st title", "description 19"], 
 
     ["4389 Decarie", 45.480705, -73.620274, "22nd title", "description 20"] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 12, 
 
     center: new google.maps.LatLng(45.484876, -73.609120), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     scrollwheel: false 
 
    }); 
 

 
    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]), 
 
     title: locations[i][0], 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent("<h3 class='title'>" + locations[i][3] + "</h3><div style='text-align: center'>" + locations[i][0] + "</div><div class='description'>" + locations[i][4]+"</div"); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    }

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h3 { 
 
    text-align: center; 
 
} 
 
.title { 
 
    color: blue; 
 
    } 
 
.description { 
 
    color: green; 
 
    font-face: "Courier"; 
 
    }

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="map"></div>

Answer 2

확실하지 : 클래스 이름으로 , 당신은 CSS 파일에 스타일을 포맷 할 수 있습니다.

여기에서 jsfiddle을 참조하십시오. 희망이 도움이됩니다.

... 
    infowindow.setContent('<h4 class="modern">'+locations[i][0]+'</h4>');