LoginSignup
40

More than 5 years have passed since last update.

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

Posted at

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…

参考・引用

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40