サポート » 使い方全般 » Geo Mashup や、Lightweight Google Maps の一覧地図をトップに表示

  • 解決済 mumumumu

    (@mumumumu)


    Geo Mashup や、Lightweight Google Maps の個別記事ではなくて、
    固定ページの集約された地図をTOP(index.php)ページに表示させるようにしたいのですが、どうしたらよいのでしょうか・・?  

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 地図ページを固定ページとしてフロントページに使うか、Javascriptなどをそっくりそのままテーマのindex.php(やhome.php)に貼り付ける方法があります。

    前者の場合は、別途地図ページを作成した後、[表示設定]にて特定のページをフロントページに指定します。後者については、home.phpを使うのでなければ、is_home()などを使ってトップのみに表示させます。
    作業はやや煩雑ですが、最終的な出力にJavascriptなどがすべて適切に配置されるようにすればどんな場所にも配置可能です。

    どちらも、地図を配置したい場所にマークを追加するのをお忘れなく。
    Geo Mashupなら
    <!–GeoMashup–>

    Lightweght Google Mpasなら
    <div id="google_maps"></div>
    のようなマークです。

    集約された地図

    地図が複数ある、という意味ならプラグインを使わずに
    footer.php に以下を追加して

    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=あなたのGoogle MAPS APIキー" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready( function($) {
      if (GBrowserIsCompatible()) {
        function createMap(lat, lng){
          var point = new GLatLng(lat , lng);
          $gmaps = $('#gmaps');
          if($gmaps.length > 0){
    	var map = new GMap2($gmaps.append('<div class="gmap"></div>').children(':last').get(0));
    	map.setCenter(point, 16);
    	map.setMapType(G_NORMAL_MAP);
    	var marker = new GMarker(point);
    	map.addOverlay(marker);
    	map.addControl(new GSmallMapControl());
    	map.addControl(new GMapTypeControl());
          }
        }
      }
      $(window).unload(function(){
        GUnload();
      });
    
      if(createMap){
        // ポイントを好きなだけ追加
        createMap(35.681118, 139.767036); //東京駅
        createMap(35.362913, 138.731232); // 富士山
      }
    });
    //]]>
    </script>

    index.php に
    <div id="gmaps"></div>
    と書けばその中に地図が追加されます。

    CSS例)

    .gmap{
    width:200px;
    height:200px;
    float:left;
    margin:10px;
    }
    #gmaps{
    width:100%;
    height:auto;
    overflow:hidden;
    }

    .jsファイル化,マークアップ変更,CSS はお好みで。

    GoogleMaps API は V3 がリリースされていますので、プラグインを使わないのであればV3にトライしてみるというのも、今後の役に立つかもしれません。

    V3版。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
    <script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready( function($) {
      function createMap(lat, lng, myTitle){
        $gmaps = $('#gmaps');
        if($gmaps.length > 0){
          var myLatlng = new google.maps.LatLng(lat, lng);
          var myOptions = {
    	zoom: 16,
    	center: myLatlng,
    	mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var myMap = new google.maps.Map($gmaps.append('<div class="gmap"></div>').children(':last').get(0), myOptions);
          var marker = new google.maps.Marker({
            position: myLatlng,
    	map: myMap,
    	title: myTitle
          });
        }
      }
    
      createMap(35.681118, 139.767036, '東京駅です');
      createMap(35.362913, 138.731232, '富士山です');
    });
    //]]>
    </script>

    APIキー不要&シンプル。

    kurosquare様
    本当にありがとうございます。表示設定のほうで移動させることが
    できました^^
    好きな場所に張れるのなら、Javascriptを貼り付ける方法もやってみたいのですが、そっくりそのままのJavascriptは、プラグインのファイルのなかの一部の行なのでしょうか・・?

    kz様
    タグまで書いていただいて本当に感謝です。ありがとうございます。ちんぷんかんぷんなのですが、貼り付けたら表示されました。すごいですね。記事と連動させるには、ここから改造していくのですかね。少しづつ勉強してみます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「Geo Mashup や、Lightweight Google Maps の一覧地図をトップに表示」には新たに返信することはできません。