ホームページに地図を設定したい時ありますよね。
よく使われるのがGoogleマップを埋め込む方法です。
地図を表示させたい目的は、たいてい、ある特定の地点（例えば会社の場所）を指し示すためであり、
マーカーを置くのはほぼ必須となります。
そしてマーカーをクリックした時に何らかの動作をさせたい時も出てくると思います。
よく使われるのがGoogleマップを埋め込む方法です。
地図を表示させたい目的は、たいてい、ある特定の地点（例えば会社の場所）を指し示すためであり、
マーカーを置くのはほぼ必須となります。
そしてマーカーをクリックした時に何らかの動作をさせたい時も出てくると思います。
今回は、埋め込みGoogleマップでのマーカーを、標準マーカーからカスタマイズする方法について取り上げたいと思います。
クリックした時に、何か動作させることもできます。
標準的な埋め込み方法：
Googleマップで表示させたい場所・縮尺にしてから、
左上にあるリンクボタンを押し、「ウェブサイトへの埋め込み用HTMLコード」をコピー＆ペーストします。
これは iframe を利用しているので、手を加える要素が限られてきます。
柔軟に加工したい場合は、Google Maps API と jQuery を用いて行う方が良いと思います。
以下に流れを書いていきます。
１．基本のマップ表示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ・・・ <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.3/jquery.min.js"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { // オプションの指定 var mapOptions = { zoom: 15, // 地図の初期表示の拡大率 center: new google.maps.LatLng(35.68869, 139.814157), // 地図の中心点の座標（緯度・経度） mapTypeId: google.maps.MapTypeId.ROADMAP // MAPタイプの指定 }; // MAPオブジェクトの作成 var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions); }); </script> ・・・ <div id="brisk-map" class="brisk-map"></div> |
mapOptions にオプションを指定することにより、いろいろカスタマイズできます。
例えば、ズームボタンやスクロールボタン等のユーザーインターフェースをなくしたり、
ダブルクリックでズームできないようにしたり。
詳しくは公式ドキュメント（英語）をご覧ください。
２．アイコンの設置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | ・・・ <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.3/jquery.min.js"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { // オプションの指定 var mapOptions = { zoom: 15, // 地図の初期表示の拡大率 center: new google.maps.LatLng(35.68869, 139.814157), // 地図の中心点の座標（緯度・経度） mapTypeId: google.maps.MapTypeId.ROADMAP // MAPタイプの指定 }; // MAPオブジェクトの作成 var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions); // MARKERイメージを作成 markerImg = new google.maps.MarkerImage( "/images/blog/brisk-logo.png", // アイコン画像のパス new google.maps.Size(50, 60), // アイコン画像の表示させたい範囲（サイズ） new google.maps.Point(0, 0), // アイコン画像の表示させたい範囲の基準点（左上） new google.maps.Point(25, 60), // アイコン画像内のアンカー点の位置 new google.maps.Size(50, 60) // アイコン画像の実際の表示サイズ ); // MARKERオブジェクトを作成 markerObj = new google.maps.Marker({ position: new google.maps.LatLng(35.68874, 139.81415), // アイコンのアンカー点の緯度・経度 map: mapObj, // 上で作成したMAPオブジェクトを指定 icon: markerImg // 上で作成したMARKERイメージを指定 }); }); </script> ・・・ <div id="brisk-map" class="brisk-map"></div> |
３．クリックイベントの登録：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | ・・・ <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.3/jquery.min.js"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { // オプションの指定 var mapOptions = { zoom: 15, // 地図の初期表示の拡大率 center: new google.maps.LatLng(35.68869, 139.814157), // 地図の中心点の座標（緯度・経度） mapTypeId: google.maps.MapTypeId.ROADMAP // MAPタイプの指定 }; // MAPオブジェクトの作成 var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions); // MARKERイメージを作成 markerImg = new google.maps.MarkerImage( "/images/blog/brisk-logo.png", // アイコン画像のパス new google.maps.Size(50, 60), // アイコン画像の表示させたい範囲（サイズ） new google.maps.Point(0, 0), // アイコン画像の表示させたい範囲の基準点（左上） new google.maps.Point(25, 60), // アイコン画像内のアンカー点の位置 new google.maps.Size(50, 60) // アイコン画像の実際の表示サイズ ); // MARKERオブジェクトを作成 markerObj = new google.maps.Marker({ position: new google.maps.LatLng(35.68874, 139.81415), // アイコンのアンカー点の緯度・経度 map: mapObj, // 上で作成したMAPオブジェクトを指定 icon: markerImg // 上で作成したMARKERイメージを指定 }); // クリックイベントの登録 google.maps.event.addListener(markerObj, 'click', function() { clickMarker('BRISKです'); // クリックした時の動作内容 }); }); // クリックした時の動作内容 function clickMarker(text) { $("#floatWindow").fadeIn("fast"); return false; } </script> ・・・ <div id="brisk-map" class="brisk-map"></div> |
クリックした時に、何か動作させることもできます。
南本貴之
