BLOG ブログ

ホームページ制作
BLOG
Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

更新日：2019/08/06

ホームページに地図を設定したい時ありますよね。
よく使われるのがGoogleマップを埋め込む方法です。
地図を表示させたい目的は、たいてい、ある特定の地点（例えば会社の場所）を指し示すためであり、
マーカーを置くのはほぼ必須となります。
そしてマーカーをクリックした時に何らかの動作をさせたい時も出てくると思います。

今回は、埋め込みGoogleマップでのマーカーを、標準マーカーからカスタマイズする方法について取り上げたいと思います。

閉じる

クリックした時に、何か動作させることもできます。

標準的な埋め込み方法：
Googleマップで表示させたい場所・縮尺にしてから、
左上にあるリンクボタンを押し、「ウェブサイトへの埋め込み用HTMLコード」をコピー＆ペーストします。
これは iframe を利用しているので、手を加える要素が限られてきます。

柔軟に加工したい場合は、Google Maps API と jQuery を用いて行う方が良いと思います。
以下に流れを書いていきます。

１．基本のマップ表示：


・・・
<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>

・・・

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>

・・・

mapOptions にオプションを指定することにより、いろいろカスタマイズできます。
例えば、ズームボタンやスクロールボタン等のユーザーインターフェースをなくしたり、
ダブルクリックでズームできないようにしたり。
詳しくは公式ドキュメント（英語）をご覧ください。

２．アイコンの設置：


・・・
<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>

・・・

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>

・・・

３．クリックイベントの登録：


・・・
<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>

・・・

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>

・・・

閉じる

クリックした時に、何か動作させることもできます。

南本貴之

一覧へ戻る

Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

Google Mapにマーカー（ピン）やアイコンを表示して、クリックでコメントを出す

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ