google-maps - base64 でエンコードされた文字列を使用するマーカー

Question

base64 でエンコードされた文字列を使用して、Google マップでカスタム マーカーを使用しようとしています。どういうわけかうまくいきません。

Answer 1

次のようにしてみてください。

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: 'hello',
    id: 'hehehe',
    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA..."
});

編集：補足：サーバー側言語を使用してjsを生成している場合は、いつでもPHP/Python/その他のコードを挿入して画像をロードし、それをbase64表現に変換できます。

(PHP バックエンド) のようなもの:

$path = 'path/to/my/image.ext';

$info = getimagesize($info);
$ext = ($info[2]);

$data = file_get_contents($path);
$encoded = 'data:image/' . $ext . ';base64,' .base64_encode($data);

次に（フロントエンド）：

var marker = new google.maps.Marker({
    //...
    icon: '<?=$encoded;?>'
});