Google지도 라벨에 글꼴 멋진 아이콘 클래스를 추가하는 방법

Question

Google지도 라벨 클래스에 글꼴 멋진 아이콘 클래스를 추가하는 방법을 찾는 데 시간을 투자했지만 해결책을 찾을 수 없습니다. gmaps 및 markerwithlabes 플러그인을 시도했지만 여전히 작동하지 않습니다. 내가 너무 오버레이를 시도했지만 축소하는 동안 그들이 중복받을 .. 여기 내 자바 스크립트 코드 나는이 도움이 필요

var marker = new google.maps.Marker({ 
 
          'position': latLng, 
 
          'icon': markerImage , 
 
          'label': {'text': '<i></i>', 'color': "black"}, 
 
          'optimized': false 
 

 
         });

의 조각입니다.

Answer 1

실제로 레이블에 html을 삽입 할 수 있을지 의심 스럽습니다. 그러나 FontAwesome과 같은 아이콘 글꼴을 사용할 수 있습니다.

당신이 FA 아이콘으로 요소와 스타일을 사용하는 경우 :

<i class="fa-camera-retro"></i> 

FontAwesome는 i 요소의 :before pseudoselector에 유니 코드 문자를 삽입 : 그래서

.fa-camera-retro:before { 
    content: "\f083"; 
} 

의를 달성하기 위해 마커 라벨에서 동일한 효과를 얻으려면 동일한 유니 코드 문자를 마커 라벨 텍스트로 선언 할 수 있습니다.

label:{ 
    text: String.fromCharCode("0xf083"), 
    fontFamily: 'FontAwesome' 
} 

물론 이것은 FA 클래스 이름을 사용하는 것만큼이나 직관적이지는 않지만 다시 말하면 누구도 쉽게 알 수 없다고 말했습니다.

var centerMap={lat:0,lng:-77 }, 
 
    zoom=7; 
 
    
 
function initMap(){ 
 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: centerMap, 
 
    scrollwheel: false, 
 
    zoom: zoom 
 
}); 
 

 
var marker=new google.maps.Marker({ 
 
    position:map.getCenter(), 
 
    map:map, 
 
    label:{ 
 
     text: String.fromCharCode("0xf083"), 
 
     fontFamily: 'FontAwesome' 
 
    } 
 
}); 
 

 
} 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    initMap(); 
 
}); 
 

#map { 
 
width:100%; 
 
height:90vh; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<i class="fa fa-camera-retro"></i> fa-camera-retro 
 
    
 
<div id="map"></div>