Google Map polylineとマーカーがずれる

Googleツール

Google Map polylineとマーカーがずれる

すみません、かなりマニアックな話で、しかも解決しれみればかなり間抜けな話ですが(^_^;

Google Map上に、位置をマーカーの点で表示し、Polylineで線を引く、Javascriptで次のようにしていたとします。
(Google Map自体の表示などは割愛)

 //マーカー	    
 var image = new google.maps.MarkerImage('map_marker.gif',

new google.maps.Size(30, 30),
new google.maps.Point(0,0)

 
 //マーカーを表示
 for (var i = 0; i < locationArray.length; i++) {
 					
 					markers=new google.maps.Marker({
 
 				    	  position: locationArray[i].LatLng,
 				          map: map,
 				          icon:image,
 				          shape: shape,
 				          zIndex: 1
 
 				   	});
 //2点間に線を引く
 var driverPath = new google.maps.Polyline({
 					    path: points,
 					    strokeColor: "#FF0000",
 					    strokeOpacity: 1.0,
 					    strokeWeight: 2
 					})
 					driverPath.setMap(map);
 
 		}

なぜかマーカーと線がずれるな~と思ったら、画像の大きさが本来10ピクセルなのに

 new google.maps.Size(30, 30),

で縦横30ピクセルの画像、と指定していたのでずれていたようです。

Google Map mapが表示されない

Googleツール
Ajax
Javascript

Google Map mapが表示されない

Google Maps JavaScript API V3になってから、いくつか仕様が変わりました。

ちょっと戸惑うのが、

 //Javascript 
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 //HTML
 <div id="map_canvas"></div>

で、

の間がGoogle Mapになるはずですが、表示されません。
高さと幅を指定しないと、Mapが表示されないようです。

 //HTML
 <div id="map_canvas" style="width: 500px; height: 500px"></div>

参考サイト
The Google Maps Javascript API V3 – Basics

Google Map SDK for iOSの導入までを翻訳してみた

iPhone

1.Google API console へ GO!!!

2. 「Create project」で新しいプロジェクトをMAKE !!!(すでにプロジェクトを登録しているなら、飛ばそう!Flying Get!)

3.プロジェクトをクリック!Click!!!

4.APIs & auth」の「APIs」で、「Google Maps SDK for iOS」をON !!!

5.「Registered apps」で「Register app」!! REGISTER APP!!!

6.「Name」にアプリ名を入力!ENTER!!! 「Platform」を「iOS」、「iOSidentification」の「Bundle ID」に「com.sample.app」みたいにバンドルIDをENTER!! APP Store IDは無視!!!

7.これで作成されたAPI Keyをコピーしておこう!!!

8.ダウンロードしたGoogle Map SDKから「GoogleMaps.framework」をプロジェクトに追加しよう!「GoogleMaps.bundle」をGoogleMap SDKの「Resources」からプロジェクトのフレームワークを入れておくディレクトリにドラッグ&ドロップしよう!

もしフレームワーク用ディレクトリを作ってないなら、この機会に作ってみよう!

9.Xcodeのナビゲーター(左のプロジェクトやらファイルやらの一覧が表示されるバー)でプロジェクト名をクリックしよう!

10.そしたら、「target」でプロジェクトを見て、「Build Phases」タブをクリック!俺のターン!ドローフェイズだ!

「with in Link Binary with Libraries」に以下のフレームワークを追加しましょう!ADD !!!!

  • AVFoundation.framework
  • CoreData.framework
  • CoreLocation.framework
  • CoreText.framework
  • GLKit.framework
  • ImageIO.framework
  • libc++.dylib
  • libicucore.dylib
  • libz.dylib
  • OpenGLES.framework
  • QuartzCore.framework
  • SystemConfiguration.framework

11.「target」ではなく、「project」でプロジェクトを開こう!そんでまた「Build Setting」タブをクリック!

「Other Linker Flags」に「-ObjC」と追加しよう!!
もし「Build Setting」がないというかわいそうな方は、見れるようにできる方法あるから、ググってください!

12.最後に、取得したAPIKeyを設定!

AppDelegate.mで

 #import <GoogleMaps/GoogleMaps.h>

application:didFinishLaunchingWithOptions に以下のコードを追加!!!

 [GMSServices provideAPIKey:@"あなたのGoogle Maps API Key"];

これで完璧です!!

Google Map Android Api Ver2之サンプルを動かしてみよう!

Android

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

1.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

2.Google Play Services ライブラリ をインポートしましょう!

ライブラリプロジェクトをインポートすると、Google Map Android Api v2が使えます!
Android SDK ディレクトリの中の、

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

を自分のPCのAndroidアプリの開発ファイルがおいてあるフォルダなどにコピペします。

そんで、Eclipse の新規プロジェクト→ Import→Android→Existing Android Code Into Workspace→ここで先程コピペしたプロジェクト
を指定してください。

それで、Finish!!

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

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

3.サンプルを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にサンプルが表示されましたか!?
されましたね!

4.サンプルのエラーを解決しましょう

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

5.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 Map Android Api Ver2 で地図が表示されない!!?

Android

Google Maps Android API v2 を使って地図を表示させたいのに、なぜか地図が表示されないという壁にぶつかることがあります。

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

API Keyを取得はできたけど、Google Maps Android API v2でどうやったら地図を表示できるんだ!

その方法を一から十まで教えましょう。

まず、”Manifestファイルを編集しましょう!”
Manifestファイルの、applicationタグの前に以下のコードを加えましょう。

 <uses-permission android:name="android.permission.INTERNET"/>
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
 <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/>
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
 <uses-feature android:glEsVersion="0x00020000" android:required="true"/>

記載したら、applicationタグの下に、次に以下のコードを加えます。

 <meta-data
      android:name="com.google.android.maps.v2.API_KEY"
      android:value=" あなたのAPI key "/>

次に、”地図を表示したいxmlを編集しましょう!”
地図を表示させたい箇所に以下のコードを加えてください。

 <fragment
 	  android:id="@+id/mapview"

android:layout_width=”match_parent”
android:layout_height=”match_parent”
class=”com.google.android.gms.maps.SupportMapFragment”
android:clickable=”true”
android:enabled=”true”/>

これでxmlはOK!!

最後に、”Activityです!!”
最低限地図を表示するのに必要なものをimportします。

 import com.google.android.gms.maps.GoogleMap;
 import com.google.android.gms.maps.SupportMapFragment;
 import android.support.v4.app.FragmentActivity;

importできたら、「FragmentActivity」を継承します。

 public class TestMapActivity extends FragmentActivity {

次に、以下のメンバ変数を加えます。

 private GoogleMap map;

最後に・・・

 @Override
 public void onCreate(Bundle savedInstanceState) {
         setUpMapIfNeeded();
 }
 //  Find and initialize the map view.
 private void setUpMapIfNeeded() {
 // Do a null check to confirm that we have not already instantiated the map.
 if (map == null) {
 // Try to obtain the map from the SupportMapFragment.
    map = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.mapview)).getMap();
    // Check if we were successful in obtaining the map.
    if (map != null) {
       setUpMap();
    }
 }
 private void setUpMap() {
     //地図の表示設定をここに書きます。
 }

とりあえず、これでアフリカが中心となって地図が表示されます。
ここまで来たら安心なので、あとはググったりデジウィキでGoogleMapについての記事を読んで。現在位置を取得したり、ルートを表示させたりなどとやりたいことをやりましょう。

  • コンパイルは問題なく通ったけど、アプリが予期せず停止して起動しない。 — じぃしぃ {2013-09-04 (水) 10:53:12}
  • コンパイルは問題なく通ったけど、アプリが予期せず停止して起動しない。 — じぃしぃ {2013-09-04 (水) 11:03:14}