google mapの埋め込み - Webマスターへの道

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps ルート検索</title>
<style>
#map_canvas {
    width:700px;
    height:500px;
}
#container {
    margin:40px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="mapdrow.js"></script>
</head>
<body onload="initialize();">
<div id="container">
<h1>Google Maps ルート検索</h1>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p>
始点：<input type="text" name="start" id="start" size="12" maxlength="100">
 &nbsp;終点：<input type="text" name="end" id="end" size="12" maxlength="100">
</p>
<p>
 <input type="button" value="検索" onclick="searchRoute()" />
</p>
<div id="map_canvas"></div>
</div>
</body>
</html>
||< 

JavaScript を使って、Google マップをウェブページに埋め込むエクササイズ
香港の地下鉄上環駅を指定してみました。場所が少しずれました。
？？？南極の昭和基地もいけるのかな？？？
[f:id:sakamotosmile40:20120905180903j:image]

>||
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {
	
 // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(22.28524,114.15139);

//地図必須のプロパティーを設定
var myOptions={
	
//ズームレベルの指定0〜17
zoom:15,

  // ■地図の中心を指定（上記で設定の緯度経度latlng）
center:latlng,

 // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、
HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
	mapTypeId: google.maps.MapTypeId.ROADMAP
	
 };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//中心にマーカーの表示
var marker1=new google.maps.Maker({
	position:latlng,
	title:"香港特別行政区内の地鉄上環站"
});
marker1.setMap(map);

}//initialize()

</script>
</head>
<body onload="initialize()">

<!--地図はここに描画される-->
<div id="map_canvas"style="width:640px; height:480px;"></div>
</body>
</html>