アイコン フォント アイコン (Font Awesome など) を Google マップ V3 のマーカーとして使用して、デフォルトのマーカーを置き換えることができるかどうか疑問に思っていました。それらを HTML または PHP ドキュメントに表示/挿入するには、マーカーのコードは次のようになります。
<i class="icon-map-marker"></i>
アイコン フォント アイコン (Font Awesome など) を Google マップ V3 のマーカーとして使用して、デフォルトのマーカーを置き換えることができるかどうか疑問に思っていました。それらを HTML または PHP ドキュメントに表示/挿入するには、マーカーのコードは次のようになります。
<i class="icon-map-marker"></i>
私はちょうど同じ問題を抱えていました-迅速で汚い変換を行い、githubでホストすることにしました。
https://github.com/nathan-muir/fontawesome-markers
JS ファイルを手動で含めるか、 または を使用npm install fontawesome-markers
できbower install fontawesome-markers
ます。
JavaScriptファイルfontawesome-markers.min.js
を含めるだけで、次のように使用できます。
new google.maps.Marker({
map: map,
icon: {
path: fontawesome.markers.EXCLAMATION,
scale: 0.5,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: '#f8ae5f',
fillOpacity: 0.7
},
clickable: false,
position: new google.maps.LatLng(lat, lng)
});
編集 (2016 年 4 月): v4.2 用のパッケージが追加されました -> v4.6.1
これは古い投稿であることは知っていますが、念のため、MarkerLabel
オブジェクトを今すぐ使用できます。
var marker = new google.maps.Marker({
position: location,
map: map,
label: {
fontFamily: 'Fontawesome',
text: '\uf299'
}
});
私のために働いた。
.
ネイサンが上で同じことをよりエレガントに行ったことに気付く前に、同じことを試みました(「markerwithlabel」ユーティリティライブラリを使用):http://jsfiddle.net/f3xchecf/
function initialize() {
var myLatLng = new google.maps.LatLng( 50, 50 ),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new MarkerWithLabel({
position: myLatLng,
draggable: true,
raiseOnDrag: true,
icon: ' ',
map: map,
labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
labelAnchor: new google.maps.Point(22, 50)
});
marker.setMap( map );
}
initialize();
最新のブラウザーでは、キャンバスを使用してフォントを png にレンダリングし、データ URI スキームを使用できます。
function getIcon(glyph, color) {
var canvas, ctx;
canvas = document.createElement('canvas');
canvas.width = canvas.height = 20;
ctx = canvas.getContext('2d');
if (color) {
ctx.strokeStyle = color;
}
ctx.font = '20px FontAwesome';
ctx.fillText(glyph, 0, 16);
return canvas.toDataURL();
}
例:getIcon("\uf001")
音符の場合。
awesomefont ICON INSIDE を含む awesomefont MARKERが必要な場合:
1. awesomefont マーカーの SVG パスをコピーし ([ダウンロード] をクリックして SVG パスをコピーします)、それを次のように使用しますicon
(作成者のクレジットを忘れないでください。ライセンスを参照してください)。その後、好きな色に変更できます。
2.label
素晴らしいフォントアイコンコードと必要な色を挿入するだけです。
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="map"></div>
<script>
function init() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(51.509865, -0.118092)
});
var icon = {
path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
fillColor: '#333333', //color of the marker
fillOpacity: 1,
strokeWeight: 0,
scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
}
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: icon,
label: {
fontFamily: "'Font Awesome 5 Free'",
text: '\uf0f9', //icon code
fontWeight: '900', //careful! some icons in FA5 only exist for specific font weights
color: '#FFFFFF', //color of the text inside marker
},
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>