[ JQuery ]
マウスのイベントを処理する時に、ブロックに何も無い時は、イベント処理内で利用できる引数で、そのプロパティのoffsetX、offsetYを参照する事で、ブロック内でその右上を(0,0)とし、右下にタテヨコの座標の値が増加する座標系でのマウスの位置を知ることが出来る。
ここにimg タグで画像を貼り付けた場合、画像上の座標を同様に左上が(0,0)となるマウスの座標を取得するには、offsetX、offsetYは利用出来ません。どうしてなのでしょう。取得出来るようにしてみたいと思います。
テスト領域
画像をブロック内で表示した場合ですが、そのままのスクリプトではイベントに反応しなくなります。
mousemoveには反応しますが、clickに反応しない。
(画像がエリアより大きいのではみ出しています。)
・・・と思ったら、私のスクリプトの記述ミスで、clickにも反応した。
ブロックの背景としてCSSで指定してみる。
CSSの背景となるとイベントは最初と同様となりました。
スクリプト内ではこれで良いことも多いかもしれません。
ただし、画像が一枚だけの今回の時だけで、複数の画像を並べたりするとまた方法を考えないといけません。
この上の説明は正確ではありません。
それを踏まえて（特に踏まえてもいない）、クリックしたイメージのタテヨコの座標をGoogleMaps上の位置に変換して周辺をすこし拡大表示するURLをテキストボックスに入れてみます。
座標の計算には、地図のサイズとその地図の対角線の座標（地図上）が必要です。ここで、それらは固定として、変数に入れておいて利用します。