Roroa.

こんにちはkazukiです。
先日Google Map APIを使いマップ上にマーカーを複数表示させる感じのjsを実装していました。

できた！と思ったのですがIEで真っ白という現象が起きてしまいました。。。
他のブラウザでは問題なく表示されていたのでちょいちょいあるIEのみの現象。。。

今回はまた同じことが起きる時のためにメモっておきたいと思います。

どのようなマップ表示をしようとしていたのか

まず今回どのようなマップにしていたのかというと

• Google Mapに複数のマーカーを表示
• 各マーカーは別画像
• 1箇所だけマーカーの位置をポイントの左下に

このようにしよとしていました。
しかし、IEでは真っ白でした。。。

原因は？？

いろいろ調べてみた結果、「1箇所だけマーカーの位置をポイントの左下に」でマーカーを変更すると上手くいかないことに気付きました。

画像だけをそれぞれ変えている分にはIEでは表示されているのに、マーカーの位置を変えてしまうと真っ白になっていたのです。

そして、マーカーの位置を変更する際に、new google.maps.MarkerImageを使うのですが、その中のscaledSizeが記述されていないのが原因でした。

画像だけ変えている分にはIEでも表示される

このように画像だけを変える分には問題なく表示されていました。

var marker = new google.maps.Marker({
		icon:'画像のパス'
	});

※jsの一部抜粋です。

マーカーの位置を変えるとIEで表示されなくなる

マーカーの位置を変えようとして記述していたコードがこちらです。

var marker = new google.maps.Marker({
	icon: new google.maps.MarkerImage(
		'画像のパス',
		new google.maps.Size( 画像の幅 , 画像の高さ ),
		new google.maps.Point(0,0),
		new google.maps.Point(0,0)
	)
});

※jsの一部抜粋です。

こちらではIEで真っ白くなります。

解決コード

解決できたコードがこちらです。

var marker = new google.maps.Marker({
	icon: new google.maps.MarkerImage(
		'画像のパス', // (1)
		new google.maps.Size( 画像の幅 , 画像の高さ ), // (2)
		new google.maps.Point(0,0), // (3)
		new google.maps.Point( 左にpx , 上にpx ), // (4)
		new google.maps.Size( 画像の幅 , 画像の高さ ) // (5)
	)
});

こちらです！

「ん？変わってないんじゃない？」と一瞬思いますが、最後にnew google.maps.Size( 画像の幅 , 画像の高さ )が加わっています。
そう！ここがなかったためにIEで表示されなかったのです！scaledSizeの部分になるのですが、省略していたために不具合が起きていました。

なので、こちらをちゃんと記載してあげるとIEでも表示されるようになります。

一応、何がどの部分なのかも記載しておきます。

(1)画像のパス

こちらはそのままなのですが、画像のパスになります。

(2)トリミングする際のサイズ

こちらは画像をトリミング表示する際の、サイズ指定になります。
特に一部だけ表示ではなく、画像全体の場合は、画像サイズを入力しておけばと思います。

(3)マーカーを移動させるときの基準値（スタート位置）

マーカー画像の基準位置になります。new google.maps.Point(0,0) でマーカー画像の左上がポイント位置になります。

(4)基準位置からの移動の値

(3)で設定した基準位置からどのくらい移動させたいかを入力します。ちなみに左と上に移動していくので、
new google.maps.Point( 20 , 10 ) の場合は左に20px、上に10px移動させることになります。
いつもとなんだか逆な感覚ですね。

(5)スケールサイズの指定

画像のサイズを指定します。スケールなので拡大・縮小することができます。