Google MapsのマーカーをRetinaディスプレイにサクッと対応させる

  • 39
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Google Mapsのマーカー、Retinaディスプレイでそのままだと画像がボケちゃうのでその対策。

とは言えやることは、大きいサイズの画像を読み込む→縮小して表示させるといういつもの手順。でもまぁもう一度英文読むのとかイヤなので、マップ周りのコードごとまとめてストックしとこうそうしよう。

var myLatlng = new google.maps.LatLng(34.687571, 135.526239);

function initialize() {
  var mapOptions = {
    zoom : 17,
    center : myLatlng
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var image = {
    url : 'icon.png',
    scaledSize : new google.maps.Size(48, 48)
    // ↑ここで画像のサイズを指定
  }

  var marker = new google.maps.Marker({
    position : myLatlng,
    map : map,
    icon : image,
    title : "hogehoge"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

もちろん画像は、表示させたいサイズ×2とかで作りましょう。めんどk…

参考・引用