• 小
  • 中
  • 大

スクリプトの記述


Google Maps v3 APIを使用する場合は、地図をを表示しその上にマーカー情報ウィンドウなどを表示したり、クリックされた時の処理を記述することができます。

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}
</script>

JavaScriptを使って記述のルールとして、XHTMLページの中にJavaScriptコードを記述する場合、「<」や「&」などの文字を「&lt」や「&amp;」のようにエスケープして記述するか、または下記のようにJavaScriptコードをCDATAセクションの中に記述します。

<script type="text/javascript">
//<![CDATA[
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}
//]]>
</script>

一般的には、JavaScript記述部分が長くなると検索ロボットに嫌われますのでスクリプトの部分を外部ファイルとして持たせ、そのファイルを読み込むことでスクリプトを実行させる方法をお勧めします。

スクリプトを外部ファイルとして用意する


必要なコード部分だけを記述したテキストファイルを作成します。
外部ファイル
function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}

ベースとなるWebページから先スクリプトを外部ファイルを読み込みます。
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<script src="外部ファイル名" type="text/javascript"></script>

スクリプト部分が複雑で長い場合には、別ファイルとして分けて構築しましょう。
スクリプトを外部ファイルに分けても、HTMLページの中に直接書いた場合と動作は一緒です。

表示例 スクリプトを外部に記述


Google Maps サンプル > スクリプトを外部ファイルに記述