Google Maps APIを使う

APIキーの取得

http://qiita.com/bird_nitryn/items/ca3ed4dfa428bf80447b

ここがとにかく丁寧

一番下にlocalhost上での動かし方も

「とりあえず表示」のサンプルコード

http://www.ajaxtower.jp/googlemaps/gmap2/index1.html

code1_1.jsとmap1_1.html

マーカーの配置

http://www.ajaxtower.jp/googlemaps/gmarker/index1.html

マーカーの色変更

http://www.ajaxtower.jp/googlestaticmaps/marker/index4.html

Google Chart API

http://99blues.dyndns.org/blog/2011/06/google-maps-api_-_change-marker/

カスタマイズってほどではなく簡単にマーカーの見た目を変更できる

独自マーカー(pngファイルを表示)

http://www.ajaxtower.jp/googlemaps/gmarker/index2.html

./imgというのはhtmlファイルのディレクトリを基準とした場所のこと(./js/imgではない)

本家で紹介してるやり方の方が簡単かも

https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Markers

マーカーをクリックしたら情報ウィンドを表示

http://www.nanchatte.com/map/showDifferentInfoWindowOnEachMarker.html

一番上のサンプルコード

情報ウィンドについてももうちょい詳細な
http://phpjavascriptroom.com/?t=ajax&p=googlemapsapiv3_infowindow

JSONファイルの読み込み

http://www.google-mapi.com/googlemaps/foreign-file-procedure.html

Zoomを指定箇所が全部入るように収める
http://ma-bank.com/item/1415
これのaMapFitBoundsの機能をinitializeの最後に書けば良い