たねっぱ！ » API https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 GoogleMapをカスタムしてグレースケール&オリジナル画像マーカーの地図を作る方法 https://taneppa.net/gmap_custom/ https://taneppa.net/gmap_custom/#comments Tue, 08 Sep 2015 02:43:40 +0000 tanippa! https://taneppa.net/?p=2727

※※※※※2017年6月 現在 Google Map APIの利用のために API KEY取得が必要になっております。

色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。

今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。

今回の目標

スクリーンショット 2015-08-31 13.46.22

今回の目標は、↑のようなグレースケールでマーカーにオリジナル画像を使った地図を表示することです。

では、まず基本から見て行きましょう！

基本

カスタマイズのためにはGoogleが提供しているGoogleMapApi v3を利用します。API?v3?ってなる人も多いと思いますが、とりあえずそういう名前なんだってスルーしてもらって構わないです。

では、とりあえず例として弊社を表示する地図を表示してみましょう。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Google Map Custom Tutorial</title>

  <style>
    /*
    地図を表示するための領域のスタイル指定
    サイズがしていされていないと地図が正常に表示されないので必ず指定しましょう
    */
    #map {
      width: 600px;
      height: 300px;
    }
  </style>
</head>
<body>

  <!-- 地図を表示するための領域 -->
  <div id="map"></div>

  <script>
    function initMap() {

      // 地図の初期中心座標を指定
      var latLng = new google.maps.LatLng(34.683497, 135.4888082);

      var map = new google.maps.Map(
        // getElementByIdには、地図を表示するための領域に
        // 指定したidを設定すること。（今回は「map」）
        document.getElementById("map"),
        {
          zoom: 18,  // 地図の初期拡大率
          center: latLng, // 先ほど設定した中心座標を設定
          scrollwheel: false  // マウスホイールで拡縮しなくなる
        }
      );

      // マーカーの設定
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
</body>
</html>






結果

説明

結果を見てもらえばわかりますが、なんの変哲もないGoogleMapですね。こんな表示の仕方ならわざわざGoogleMapAPIを利用する必要もないのですが、これからカスタマイズする為の基本形になりますのでわりと重要です。

コメントでも注釈を入れていますが、注意点としては、

  • 21行目：地図を表示する為の領域をdivタグ等で作り、idを指定しておく
  • 32行目：スクリプト内のgetElementByIdでは、地図表示領域のidを指定する
  • 7~16行目：地図表示領域にはサイズを指定する
  • 47行目：callback=~にはscriptタグで指定した関数名（今回は24行目の関数）を設定する

また、デフォルトだと地図上でマウスホイールを回した際に地図が拡縮するのですが、ページをスクロールしようとしたのに地図が拡縮するといった事が頻繁に発生し、ものすごいストレスフルなので「scrollwheel: false」の指定でマウスホイールに反応しないようにしています。マウスホイールでの拡縮を残しておきたい場合はこの行は削除しましょう。

マーカーにオリジナル画像を指定する

次に、マーカーをオリジナル画像に変える方法を説明したいと思います。

ソースコード

scriptタグ内以外は先ほどと同じなので、scriptタグ部分のみを記載します。

<script>
  function initMap() {

    // 地図の初期中心座標を指定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);

    var map = new google.maps.Map(
      // getElementByIdには、地図を表示するための領域に
      // 指定したidを設定すること。（今回は「map」）
      document.getElementById("map"),
      {
        zoom: 18,  // 地図の初期拡大率
        center: latLng, // 先ほど設定した中心座標を設定
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // マーカーの設定
    var markerImg = {
      url: '/img/marker.png'  // マーカーの画像ファイルを指定
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>






結果

マーカーの画像が変わりました。このカスタマイズは非常に簡単ですね。

Tips: オリジナルマーカーのRetina対応

「marker.png」を実際に表示させる2倍のサイズで用意し、「var markerImg」の部分を以下のように変更すればRetina対応できます。

var markerImg = {
  url: '/img/marker.png',
  scaledSize : new google.maps.Size(40, 46)
};






「scaledSize」では、画像のサイズの1/2サイズを指定しています。

Tips: マーカーをクリックした時に特定の処理を行いたい。

少し応用になるのですが、マーカーをクリックした際に特定の処理をする必要が出る場合が結構あります。

その場合は以下の様なコードを追加することで対応できます。

marker.addListener(
  'click',
  function(){
    // ここにさせたい処理を入れる
    alert('marker clicked.')
  }
);






地図をグレースケールにする

では最後は、地図自体のデザイン変更を説明したいと思います。

今回はグレースケールにする方法を例とします。

ソースコード

<script>
  var map;
  function initMap() {

    // マップ基本設定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);
    map = new google.maps.Map(
      document.getElementById("map"),
      {
        zoom: 18,  // 拡大率
        center: latLng,
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    // マーカー設定
    var markerImg = {
      url: '/img/marker.png'
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
    var mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set('GrayScaleMap', mapType);
    map.setMapTypeId('GrayScaleMap');
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>






結果

説明

肝は、

var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];






の部分です、この部分で地図のデザインを指定しています。

「saturation」は「彩度」という意味で、この値によって色の鮮やかさが変わります。「-100」が一番小さい値で、この最低値を指定することで地図がグレースケールになります。

この設定ですが、Google Maps API Styled Maps Wizardを利用することで視覚的に設定値を得ることが出来ます。

スクリーンショット 2015-08-31 13.08.07

今回のグレースケールのパターン以外にも、設定次第で色々なスタイルを作成出来ますので、試してみましょう。

以上

以上で簡単なGoogleMapのカスタマイズが出来るようになりました。GoogleMapのカスタマイズは、特にデザイン性の高いサイトで必要になることが多いので是非出来るようになっておきましょう。

以上、たにっぱでした〜

]]> https://taneppa.net/gmap_custom/feed/ 0 外部ブログのタイトルを自分のサイトに表示させる（javascript） https://taneppa.net/rssfeed_js/ https://taneppa.net/rssfeed_js/#comments Tue, 05 Apr 2011 05:22:21 +0000 futappa_staff https://taneppa.net/?p=2101

こんちわ、今日はよくサイトのトップとかに他のブログの最新のタイトル表示させたりするRSS情報の取得をやってみましょう。

 

多くのブログでは最新の情報をRSSという形で外部に向けて発信しています。
それを取ってきて自分のサイトに表示させる、という事です。

 

PHPが使えれば取得が結構簡単なのですが、サーバーによってPHPが使えなかったりするので、今回はGoogleが提供しているサービスを使ってJavaScriptでやってみます。


HTML内に以下を記述

 

HTML(body内)

<div id="feedList"></div>


そして核になるjavascriptをHTML(HEAD内)に以下を記述

HTML(head内)

<!-- apiを読み込む -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- RSSを読み込んで、出力するスクリプト -->
<script type="text/javascript">

//APIのメジャーバージョン(安定版)を指定
google.load("feeds", "1");

function initialize() {

	//ブログなどのURL設定
	var feed = new google.feeds.Feed("https://taneppa.net/feed/");

	// 読み込み件数を設定
	var postcount = 3;

	//出力内容を空っぽに初期化
	var htmlstr = ""; 

	//HTML内のdiv#feedListを取得
	var container = document.getElementById("feedList"); 

	feed.load(function (result){

		if (!result.error){

			for (var i = 0; i < postcount; i++) {
				//記事を一つ取得
				var entry = result.feed.entries[i];

				//出力内容にタイトルを入れる
				htmlstr += '<h3 class="posttitle"><a href="' + entry.link + '">' + entry.title + '</a></h3>';

				//出力内容に日付けを入れる
				htmlstr += '<p class="postdate">' + entry.publishedDate + '</p>';
				
			}
			
			
			//HTML内のdiv#feedListの中に出力
			container.innerHTML = htmlstr; 
			
		}

	});


	

}

//HTMLファイルが読み込まれたときに上記のfunction initializeのスクリプトを実行
google.setOnLoadCallback(initialize); 

</script>


■//ブログなどのURL設定　のところ”https://taneppa.net/feed/”の代わりに自分が表示させたいブログのRSSを記入します。
たねっぱでいうと、グローバルナビにあるTwitterアイコン横の「電波出てるみたいなボタン」（Twitterのマークの横）のリンク先URLを使用します。
右クリックで、Firefoxの場合は「リンクのURLをコピー」、IEの場合は「ショートカットコピー」
■//読み込み件数を設定　のところで表示する件数を指定します

なんか、パッと見たところよくわからんスクリプト…って思うかもしれません。
しかし、よくコメント部分を見てみるとやってる事は簡単です。
スクリプトを見ればわかりますが、タイトルはh3タグ、日付はpタグで囲われています。なのでCSSで見た目も変えれますね。

 

★出力結果★タイトルと日付が表示されます↓

 

もっと、記事の本文とかも表示したいって方は以下サイトを参考にしてください。(日付表記の変更などもあります)

 

参考：Google AJAX Feed API入門

http://www.ajaxtower.jp/googleajaxfeed/

 

今回は簡易に書いてますが本当は細かく書いた方が良いです。（エラーが出たときなど）。全部↑の参考サイトに書いてますので、もっとちゃんと勉強したい方は見てください。

 

関連記事：PHP版！外部ブログのタイトルを自分のサイトに表示させる

]]> https://taneppa.net/rssfeed_js/feed/ 0