独自スクリプトの記述

Google Maps APIを使用する場合は、単にWebページ上に地図を表示するだけではなく、マーカーや情報ウィンドウなどを表示したり、クリックされた時の処理を記述していくことになります。「Google Maps APIを使ったページの基本構成」で基本的な構成について説明しましたが、この中で次の部分が独自のコードにあたります。

<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(35.709984,139.810703);
  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コードを記述する場合、「<」や「&」などの文字を「<」や「&」のようにエスケープして記述するか、または次のようにJavaScriptのコードをCDATAセクションの中に記述します。(詳しくは「XHTMLファイルでのスクリプトの記述」を参照して下さい)。

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

この記述方法で問題ありませんが、スクリプト部分が長くなるとHTMLページの可読性が悪くなりますので独自スクリプトの部分を外部ファイルとして分けることをお勧めします。

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

まず独自コード部分だけを記述したテキストファイルを作成します。(この場合、CDATAセクションの中に記述する必要はありません)。

function initialize() {
  var latlng = new google.maps.LatLng(35.709984,139.810703);
  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>

スクリプト部分が複雑で長い場合には、別ファイルとして分けたほうがメンテナンスも行いやすくなります。

サンプルコード

では実際に試してみます。下記のサンプルでは独自コードの部分を外部ファイルに分離しています。

code2_1.js

function initialize() {
  var latlng = new google.maps.LatLng(35.361056,138.731918);
  var opts = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

map2_1.html

<!DOCTYPE html "-//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"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p2-1

独自スクリプトの部分を外部ファイルに分けただけなので、HTMLページの中に直接書いた場合と動作は変わりません。

( Written by T.buzz.Ikura+ )

Social Button

Facebook Page