投稿日:

GoogleMap v3 マーカー位置にあわせて表示領域を自動調整する

Javascript

google.maps.MapのfitBounds(bounds:LatLngBounds)というメソッドを使うと、指定した複数座標すべてに合わせて表示領域を自動調整します。

具体的には下記のようなコードになります。

 var map = new google.maps.Map();
 // 表示領域を生成します。
 var bounds = new google.maps.LatLngBounds();
 // 地図表示領域をマーカー位置に合わせて拡大します。
 bounds.extend (new google.maps.LatLng(35.46946, 139.621542));
 bounds.extend (new google.maps.LatLng(35.466188, 139.622715));
 // 地図表示領域の変更を反映します。
 map.fitBounds (bounds);

以下、マーカーを設置して、マーカーの座標にあわせて表示領域を自動調整するサンプルコードになります。

 <!DOCTYPE html>
 <head> 
   <meta charset="UTF-8" /> 
   <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 </head> 
 <div id="map" style="width:800px; height:600px;" />
 <script type="text/javascript">
   var locations = [
      ['（株）オンラインコンサルタント', 35.46946, 139.621542],
      ['横浜駅', 35.466188, 139.622715],
      ['ランドマークタワー', 35.454948, 139.631429],
      ['横浜中華街', 35.443407, 139.642948],
      ['山下公園', 35.445877, 139.649555]
   ];
 
   var map = new google.maps.Map(document.getElementById('map'));
   var infowindow = new google.maps.InfoWindow();
   
   // 表示領域を生成します。
   var bounds = new google.maps.LatLngBounds();
   var marker;
 
   for (var i = 0; i < locations.length; i++) {  
     marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
     });
     // 地図表示領域をマーカー位置に合わせて拡大します。
     bounds.extend (marker.position);
 
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));
   }
   
   // 地図表示領域の変更を反映します。
   map.fitBounds (bounds);
 </script>
  • とても参考になりました！ — くーた {2013-10-30 (水) 15:10:39}
投稿日:

GoogleAnalytics

Webサイト作成 TIPS
Google Analyticsを使う　1
Google Analyticsを使う　2
Google Analyticsを使う　3　上位のコンテンツを見る
Google Analytics　使い方4　検索キーワード
Google Analytics　使い方5　ユーザーの参照元
Google Analytics　使い方6　目標を設定する
Google Analytics　使い方7　目標達成度を見る

Google Analyticsとは

お馴染みGoogleが提供する、高機能・無料・導入が簡単なアクセス解析ツールです。
様々な機能も魅力ですが、Excelなどでも出力ができるので、偉い人に報告するのも簡単でしょう。

投稿日:

Google+Map+Android+Api+Ver2　で地図が表示されない！！？

Android

Google Map Android Api Ver2をサンプルを動かしてみたいので、やってみましょう！

１．Google Play Services API のインストール

Android SDK Manager を開いてください。

 Eclipse の Window メニュー→ Android SDK Manager

下にある、Extra の中の『Google Play services』で最新バージョンをインストールをしてましょう！

これで、Google Play Services のインストールは完了です！

参考サイト：http://android.keicode.com/basics/mapview-v2-install-google-play-services.php

２．Google Play Services ライブラリ をインポートしましょう！

ライブラリプロジェクトをインポートすると、Google Map Android Api v2が使えます！
Eclipse の新規プロジェクト→ 『Android Project from Existing Code』
そこで、Android SDK ディレクトリの中の、

 extras\google\google_play_services\libproject\google-play-services_lib

を指定してください。

それで、Finish！！

左のPackage Explorerに、『google-play-services_lib』があるはずです。

これで、Google Map Android Api v2が使えますよ！

３．サンプルをEclipseにImport

Android SDKの中には、MapやAuthなどのサンプルがあります。
それをImportしましょう。

私の環境のPathは以下です。

 C:\adt-bundle-windows-x86_64-20130219\adt-bundle-windows-x86_64-20130219\sdk\extras\google\google_play_services\samples

左のExplorerにサンプルが表示されましたか！？
されましたね！

４．サンプルのエラーを解決しましょう

Importしたら、サンプルにエラーがたくさん出てると思います。
まず、サンプルのプロジェクトで右クリックをして『Properties』を表示しましょう。

Android→Libraryで、Addを押してください。
そこから、google-play-services_libを選択してください。
『Apply』→『OK』をしたら、なんとまだエラーがあります！

どうやら、android-support-v4.jar　をインポートできてないことが原因のようです。

プロジェクトを右クリック→Android Tools→Add Support LibraryでSDKのパッケージをインストールしてください。
すると、Referenced Librariesの中にandroid-support-v4.jarが追加されます。
さらに、エラーのほとんどが解決します！

しかし、RetainMapActivityにだけエラーがあります。
これはアクティビティ自体を削除してくれとGoogleさんが言っておりますので削除しましょう。

 https://code.google.com/p/gmaps-api-issues/issues/detail?id=5103

５．Google Map Api Key　を取得しよう！
ここを参照してください。

AndroidでGoogle Maps API Key を取得する方法【めっちゃ詳しくわかりやすい解説】

API Key を取得できたら、

 AndroidManifest.xml

を開き、

 <meta-data
      android:name="com.google.android.maps.v2.API_KEY"
      android:value="AIzaSyAPNFyEex469GdXYWxg-55BhNoJ******"/>

を追加して下さい。
(*は伏字です！)

これで実行しましょう！！！！

投稿日:

Google 検索結果に顔写真のアイコンを表示させる

Googleツール

Google 検索結果に顔写真のアイコンを表示させる

最近は検索結果に顔写真が載っているサイト、多いですよね。
これのやり方ですが、多くのサイトで古い情報が掲載されているのと、意外なところが難しかったので、今の時点（2013年6月20日）での方法を掲載しておきます。
しかも、これはSEO対策に役立つと言われています。やらない手はありませんよ！

  1. Google+のアカウントを取得し、プロフィール写真を掲載する…この方法は、すでにいろんなサイトで紹介されているので、ここでは割愛します。
  2. Google+の基本情報をクリックすると、「リンク」というコーナーに「寄稿先」という欄が表示されます。寄稿先の編集をクリックして、顔アイコンを表示させたいサイトのURLを入力します。
  3. さて、ここからがわかりにくかったことなんですが、サイト内のソースコードに次のように記述します。 
 投稿<a href="https://plus.google.com/118288830740367897514?" 
 rel="author">Akiko Goto</a>
 //リンク先は、自分のGoogle+のプロフィールのURL

ポイントは、

  1. 「投稿」と日本語で書き
  2. リンク先にGoogle+のプロフィールのURLを設定し、
  3. そのGoogle+のプロフィールと同じ名前でリンクをし、
  4. rel属性に”author”と入れる、です。
  5. このコードはCSSで見えなくしたり、背景色と同じ字の色にするなどしてかくしてはダメです。

Googleの公式ページには、コードの書き方が

 <a href="https://plus.google.com/118288830740367897514? 
 rel=author">Akiko Goto</a>

となっていますが、これだと動作しませんでした…なんのこっちゃ。
どこが違うかというと、公式ページだとダブルクオテーションがないんですね。GETパラメーターでプロフィールページにrelというパラメーターを渡すリンクを作れ、ということになっています。

公式ページに書いてあるやり方だと、サイトと同じドメインのメアドを所有しているとこんなことはやらなくてよい、という感じですが、私の場合はサイトと同じドメインのメアドを所有していても、ソースコードに上記を埋め込むまできませんでした。

で、実際のGoogleの検索結果に反映がされるまでには時間がかかりますが、次のリンク先のテストツールを利用すると、写真アイコンが表示されるかどうかわかります。

http://www.google.com/webmasters/tools/richsnippets

URLを入力して、「プレビュー」をクリックすると、写真アイコンが表示されるかどうか（著者情報ですね）がわかります[smile]

投稿日:

Google ドライブを使ってみる

Googleツール

2012年4月25日にリリースされたGoogleドライブを使ってみました。
5G、無料のオンラインストレージとはすごいと思います。

  1. 下記から右上の「無料の5GBを使ってみましょう」をクリックします。

https://drive.google.com/start#home

  1. ダイアログに沿ってGoogleアカウントなどを入力していくと、ダウンロードが始まります。
  2. Googleドライブをインストールすると、「Google Drive」というフォルダが作られ、連携しているGoogleアカウントで所有しているGoogle Docsのファイル達がここへダウンロードされます。とはいっても、ファイル本体がダウンロードされるのではなく、Google Docsのファイルへのショートカットのようです。

今のところの使い勝手は、Dropboxとそれほど変わりません。。。

しかし、便利なのは、Photoshop、Illustratorのデータを閲覧することができることです！
いちいち、Photoshopのライセンスを買わなくっても、どんなファイルかはわかるのです。
また、Photoshop、Illustratorのファイルってそれぞれ重いから、プレビューがちゃちゃっとできるのはうれしいですね。

Adobeの出しているBridgeというソフトもありますが、使い勝手が悪いですしｗ

ちなみに、PSDやAIのファイルを編集できる機能はありません…。
残念。
今のところ、画像内の日本語を検出して、検索できたりもしないようです。