google maps api でカスタマイズしたピンを表示する

ベースの地図表示

以下のhtmlを基準にカスタマイズする
地図を表示してるだけ

<div id="map" style="height:400px;width:500px;"></div>
<script>
  function initMap() {
    var LatLng = {lat: 31.5835699, lng: 130.6502527};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: LatLng
    });

    var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&callback=initMap">
</script>

文字の変更

google.maps.Markerのlabelを以下のようにするとテキストを変更できる

    var label = {
      text:"さくらじま", //表示する文字列
      color:"#00F", //色
      fontFamily:"Arial",//フォント指定
      fontSize:"20", //フォントのサイズ指定
      fontWeight:"bold" //文字の太さ
    };

    var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      label:label
    });

Marker | Maps JavaScript API | Google for Developers

図形の変更1

google.maps.MarkerのIconで変更できる
図形はPathで指定する。

    var icon = {
        path:google.maps.SymbolPath.CIRCLE, //必須 形状の指定
        anchor: new google.maps.Point(0,0), //シンボルの位置を設定(-左 +右 , -上 +下)
        fillColor:"#F00", //色指定
        fillOpacity:0.5, // 透過率の指定
        labelOrigin:new google.maps.Point (0,0),//pathの原点に対するラベルの原点位置(-左 +右 , -上 +下)
        rotation:0, //回転
        scale:30,// サイズの指定
        strokeColor:"#0F0", //枠線の色
        strokeOpacity:0.5,//枠線の透過率
        strokeWeight:5,//枠線の太さ
    };

    var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      icon: icon,
      label: label
    });

定義済みの図形は5種類あるのでPathを指定すれば変更できる
https://developers.google.com/maps/documentation/javascript/reference/marker?hl=ja#SymbolPath:titile

BACKWARD_CLOSED_ARROW
BACKWARD_OPEN_ARROW
CIRCLE
FORWARD_CLOSED_ARROW
FORWARD_OPEN_ARROW

var icon ={
      path:google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
      //...以下略
}

図形の変更2

PathはSVG形式で指定することもできる

//縦20、横50の長方形を作る
var svg = "M -25,10 25,10 25,-10 -25,-10 z";

var icon ={
      path: svg,
      //...以下略
}

SVGによる図形と文字の変更

SVGのマークアップを指定することもできる
SVGはHTML内にマークアップで記入することができる

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
        <title>810_pin_h</title><rect width="48" height="48" fill="none"/>
        <path d="M39,19c0,11-15,25-15,25S9,30,9,19a15,15,0,0,1,30,0Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
        <circle cx="24" cy="19" r="5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
        <text x="24" y="19" font-size="20" text-anchor="middle" stroke-width="0.5" fill="green">test</text>
    </svg>
</body>

設定によりピンの色を変えたかったのでJavaScriptで設定できるようにする
fillで色を変更できるので設定する

    var template = [
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="40px" height="40px">',
        '<path d="M39,19c0,11-15,25-15,25S9,30,9,19a15,15,0,0,1,30,0Z" fill="{{ color1 }}"/>',
        '<circle cx="24" cy="19" r="8" fill="{{ color2 }}"/>',
        '<text x="24" y="19" font-size="20" text-anchor="middle" stroke-width="0.5" fill="blue">test</text>',
    '</svg>'].join('\n');
    var svg = template.replace('{{ color1 }}','#F27398').replace('{{ color2 }}', '#58BE89');
    var icon = {
        url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg)
    };

    var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      icon:icon
    });

なんでもぶろぐ

ゲームやプログラムなど作ったものや学習したものをまとめておくブログ