サカグチデザインオフィス

ブログBlog

Googleマップを1つのページに2つ表示(jQuery)

2012.05.29更新

Googleマップを1つのページに2つ表示したくいろいろやっていまして、google map APIの詳しいところ、正直詳しくないんですが、できてしまったので一応書きます。

また、読み込み順の調整のためにjquery使用しています。

HTML

<head>
<script src="http://hogehoge/js/jquery.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://hogehoge/js/googlemap01.js"></script>
<script src="http://hogehoge/js/googlemap02.js"></script>
</head>
<body>

JavaScript

googlemap01.js

$(function(){
    var op01={
   	 zoom:16,
   	 center:new google.maps.LatLng(35.693242,139.749873),
   	 mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map01=new google.maps.Map(
   	 document.getElementById("map_canvas"),
   	 op01
    );

    var obj01={
   	 position:new google.maps.LatLng(35.693242,139.749873),
   	 map:map01
    };

    var marker=new google.maps.Marker(obj01);

    var info=new google.maps.InfoWindow({
   	 content:'hogehoge'
    });

    info.open(map01,marker);

});

googlemap02.js

$(function(){
    var op={
   	 zoom:14,
   	 center:new google.maps.LatLng(35.704279,139.751942),
   	 mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map02=new google.maps.Map(
   	 document.getElementById("map_canvas_s"),
   	 op
    );


    var obj02={
   	 position:new google.maps.LatLng(35.704279,139.751942),
   	 map:map02
    };

    var marker=new google.maps.Marker(obj02);

    var info=new google.maps.InfoWindow({
   	 content:'hogehoge'
    });

    info.open(map02,marker);

});

今回自分作ったサイトでは、全ページに小さな地図、1ページだけ通常の地図と小さな地図が2つ、というような場合でした。このような場合、地図が2つあるページだけjsファイルがちゃんと2つ読み込まれるようにしておかないと、その他のページでエラーになってしまうので注意が必要です。

また、地図1つのページで2つのjsファイル読み込もうとした際には1つも表示されなかったと思います。基本ですが、必要なものだけ必ず読み込むようにしましょう。

ウェブ戦略にお悩みですか?

御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します!
デザインは2005年から。携わったHPは200件以上!