[HTML5]オリジナル画像の地図からGoogleMap風の地図を作る

Question

スマートフォン専用サイト（HTML5+Javascript,jQuery）で、オリジナルの地図を使ったページ作成を行っています
想定は、HTML5のAPIを使い緯度経度を取得
取得した緯度経度から、オリジナルのマップを拡大し、周辺のスポットにピンを立てたいと考えいます

まさに、google maps apiと同じ要件なのですが、オリジナルの地図を使いたいと言うのが最大の要件で、緯度経度を取得してからの流れが思いつかず困っています

アドバイスいただけると幸いです

Answer 1

まさにそのGoogle Mapに、「カスタムオーバーレイ」といって、自前の画像を貼り付ける機能があります（ドキュメント、サンプル）。

Answer 2

マップタイル を自作すれば元の地図と置き換えることもできます。

【マップタイプ  |  Google Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/maptypes?hl=ja#CustomMapTypes

Google Maps JavaScript API は、カスタム マップタイプの表示と管理をサポートしており、独自のマップ画像またはタイル オーバーレイの実装が可能です。

オープンソースの地図表示ライブラリでも同じようにタイルを自前のものに置き換える機能があります。

【Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference-1.2.0.html#tilelayer