WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定

gooleMap_customize_top

コーポレートサイトや飲食店のサイトなどの定番コンテンツ「Access」にGoogleMAPを埋め込むのはよくあることですが、通常のGoogleMAPからiframeで地図を埋め込むこともできますが、横幅と縦幅ぐらいのカスタマイズしかできないので、応用が効きません。そんな訳で今回はGoogleMaps APIを取得して、GoogleMapをカスタマイズする方法を備忘録としてまとめておきます。

GoogleAPIを取得してGoogleMAPを表示

gooleMap_customize01

まず、ごくごくシンプルに地図のみを表示するやり方

(1)head部分に以下のスクリプトを記述

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

(2)bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。

divのID名は好きな名前に

<body onload="initialize();">

<div id="campus_map"></div>

</body>

(3)CSSで縦横サイズを指定

widthを100%にすれば、横幅可変のスマホ対応です。

     #campus_map{
          width: 100%;
          height:300px;
     }

(4)位置情報などの情報をhead内に記述

2行目の「34.705629, 135.510118」が緯度経度。
出し方はGoogleMapで表示させたいポイントで右クリック→「この場所について」で出てくる数値を記述します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('campus_map'), myOptions);
}
</script>

これでマーカーなどの表示なしのシンプルなGoogleMapを表示できます。

DEMO

吹き出しを表示して詳細情報を表示

gooleMap_customize02

GoogleMapに登録されていない場所で、名称は住所を表示させたい場合は以下の様な感じで記述を追加します。

(1)まず、マーカーを表示させるコードをさっきのコードに追記


var marker = new google.maps.Marker({
               position: latlng,   //マーカーの位置
               map: map,   //表示する地図
               title: 'とある場所'   //ロールオーバー テキスト
                });

(2)次にマーカー上部に吹き出しを表示させるコードを追加

   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });

    //吹き出しをオープン
    infowindow.open(map,marker);

「+」で区切ることによって、吹き出しの中身の内容を追加できます。「名称」「住所」「電話番号」とか別々に設定できます。それぞれCSSで設定することもできます。

h3.map_title{
  text-align: center;
  font-size: 16px;
}
p.map_comment{
  padding:0 30px;
}

(3)一度閉じた吹き出しを再表示

「×」で消した吹き出しをマーカーをクリックすると再表示させるためのコードは以下

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

(4)今までのコードをまとめるとこんな感じ


  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_space'), myOptions);


  //マーカーを作成
  var marker = new google.maps.Marker({
    position: latlng,   //マーカーの位置
    map: map,   //表示する地図
    title: 'とある場所'   //ロールオーバー テキスト
   });
   //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });


    //吹き出しをオープン
    infowindow.open(map,marker);


    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
               
}

これで、とりあえず簡易的なMAPですが、「好きな位置」に「好きな吹き出し内容」が表示できるようになりました。

DEMO

マーカーをオリジナルデザインにする。

gooleMap_customize03

今度は位置を表示するピン(マーカー)をオリジナルのデザインにしてみます。ロゴマークのある飲食店とかのWEBサイト作成とかに使えばオリジナル感が出るかと思います。

マーカーを画像にするコードは以下

   var icon = new google.maps.MarkerImage('map_icon.png',
    new google.maps.Size(156,198),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: 'とある場所'
  };

画像アイコンがずれて表示してしまう場合は「anchor」で位置を調節します。

で、最終的に出来上がったアイコンがオリジナルのGoogleMapは以下

DEMO

アイコンが吹き出しっぽいので、詳細情報の方の吹き出しは最初は非表示にして、アイコンをクリックすれば表示されるようにしてます。

最終的に、位置情報を取得して、吹き出しを表示させて、マーカーをアイコンにする場合のコードのまとめ

  function initialize() {

  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_space'), myOptions);

  //アイコンを作成
   var icon = new google.maps.MarkerImage('map_icon.png',
    new google.maps.Size(156,198),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: 'とある場所'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
     var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });

    //吹き出しをオープン

    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
             
}

今回参考にさせていただいたサイト

まとめ

とりあえず、初歩的なGoogleMapの表示で多少のオリジナリティを出そうという事でこんな感じになりました。
ここから地図の色を変えたり、さらにカスタマイズはできますが、今回はこのぐらいで。

スマホサイトの普及で、地図はGoogleMapが一番いいのかなと思ってましたが・・・
先日の案件では「年配は使いづらいからやっぱり画像の方がいい」という意見も出ました。
クライアントさんがGoogleMapに使い慣れてないからそういう意見が出たっていうのもあるかと思いますが、必ずしも「MAP=GoogleMap」ではないんだと再認識しました。結局、画像形式のPDFDownload形式とGoogleMapの表示を切り替える折衷案になったんですけどね。今回は以上ですm(_ _)m

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ