あなたの質問にはいくつかの要素があります。google-maps には強力な JS API があり、これを使用することをお勧めします。
開始するためのいくつかのスニペット: 指定した場所に新しいマーカーを作成する:
marker = new google.maps.Marker({
position: new google.maps.LatLng(33.776989, -84.387000),
map: map,
title: '',
draggable: true
});
マーカーのカスタマイズ: https://developers.google.com/maps/documentation/javascript/overlays#Icons
新しい吹き出しの作成 (情報ウィンドウ):
infowindow = new google.maps.InfoWindow();
var contentString = '<div id="content">Hello,World</div>';
infowindow.setContent(contentString);
これにより、探しているほとんどの機能を利用できるようになります。Web サービスは、データをクライアント側の JSON にロードして、Google マップ API でレンダリングできます。