Google Maps API を使いたい。その0

Geo

Google Maps API を利用したサイトをこしらえたいと思うので。

参考

Maps API キー の取得

現状はローカル環境で使用しますので、 「利用者のウェブサイトの URL：」を「http://localhost/」にして APIキーの生成を行いました。
「http://192.168.0.1」や「http://127.0.0.1」などでも良いようです。（http://d.hatena.ne.jp/m383m/20081225/1230210992）

HTML

参考を参考にてきとうに。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <title>Google Maps API を使いたい。</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=*****"></script>
    <script type="text/javascript" src="g.js"></script>
    <script type="text/javascript" src="jq.js"></script>
  </head>
  <body style="margin:0; padding:0;">
    <div id="map"></div>
  </body>
</html>

Javascript - Maps API

Google AJAX API ローダー なるものを使用してみました。
参考を参考に、表示する地点（経緯度）・倍率の変更、インターフェースの日本語化と、おまけで jQuery の読み込み（AJAX Libraries API）を追加しています。

google.load("jquery", "1");
google.load("maps", "2", {"language":"ja_JP"});

function initialize(){
  var map = new google.maps.Map2(document.getElementById("map"));
  map.setCenter(new google.maps.LatLng(35.658632, 139.745411), 18);
}

google.setOnLoadCallback(initialize);

Javascript - jQuery

おまけ。地図をウインドウ全体に表示させたかったので。jQuery の学習も兼ねつつ。

$(function(){

function init(){
  var win = $(window);
  $("#map").width(win.width())
    .height(win.height());
}

new init();

});

おわり

地図が表示されただけでうれしい。一先ずそんなところで以下次回。つづけ