リンクが押された時にGoogle map を表示する方法

pageがloadされた時にGoogle mapを表示するのはよくありますが、リンクをクリックされた時にだけ、GoogleMap API のJSを読み込み、その後で地図を生成するには以下の方法で可能です。


1. jQueryを使うので、HEADタグ内で読み込む
<script type="text/javascript" src="../common/js/jquery-1.3.2.p.min.js"></script>


2. Google MAP APIを読み込むfunctionを作成する。HEADタグ内でOKでしょう。
この時、読み込みが終わったときのcallback 関数を指定しておきます。

function mapWrite(){

$.ajax({
async: false,
type: "GET",
url: "http://maps.google.com/maps/api/js",
data: "sensor=false&callback=mapWrite2",
dataType: "script"
});

} // end of function

3. callback関数を定義します。この中で地図の描画をします。

function mapWrite2(){

if( !$('div#map').length ){
$('table#maptbl').before('<div id="map" style="width: 400px; height: 400px"></div>');

    googlemapWrite('緯度','経度'); //この中でgoogle mapを書き出す。ここはよくある記述なので省略します。
}

上の例では、div#mapが空だったときのみ、Googlemapを表示するdivタグを挿入します。
どこに挿入するかで、このあたりは変わってくるかと思います。


4. リンクを生成します。
<a href="javascript:mapWrite();">Googlemapを表示する</a>