web-dev-qa-db-ja.com

Google Maps V3でマーカーとしてアイコンフォントを使用する

デフォルトのマーカーを置き換えるために、Google Fonts V3のマーカーとしてアイコンフォントアイコン（例：Font Awesome）を使用できるかどうか疑問に思いました。それらをHTMLまたはPHP文書に表示/挿入するには、マーカーのコードは次のようになります。

<i class="icon-map-marker"></i>
google-maps-api-3google-maps-markersfont-awesomeicon-fonts
49
gfaw

Nathanが上記のよりエレガントに同じことを実現する前に、同じことを（「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();
30
Jason

私はちょうど同じ問題を抱えていました-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のパッケージがあります

81
nathan-m

私はこれが古い投稿であることを知っていますが、念のため、今すぐMarkerLabelオブジェクトを使用できます：

var marker = new google.maps.Marker({
    position: location,
    map: map,
    label: {
        fontFamily: 'Fontawesome',
        text: '\uf299'
    }
});

私のために働いた。

See fontawesome icon on google map marker。

Googleマップメーカーを参照

38
guido

軽量ソリューション

  • fontawesome-markers：480kb
  • markerwithlabel：25kb

これらの依存関係を回避するには、単純に fontawesome-markers に移動し、目的のアイコンのパスを見つけて、次のように含めます。

var icon = {
    path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
}

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon
});
15
Jeremy Lynch

最新のブラウザでは、キャンバスを使用してフォントを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")は音符です。

13
Roman

必要な場合awesomefontアイコンが付いたawesomefont MARKER：

1。awesomefontマーカーの SVGパスをコピー （ダウンロードをクリックしてSVGパスをコピー）およびiconとして使用します（作成者のクレジットを忘れずに、 license を参照）。その後、色を好きなものに変更できます。

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>
3
Matej P.

Font Awesomeアイコンを使用してNice SVGマーカーを生成する簡単なJSライブラリを作成しました。 https://github.com/jawj/MapMarkerAwesome

0
jawj