スポンサードリンク

Category Archives: Google Maps API v3

合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる/ルート検索API(Direction API)

◆ Google Maps API v3 / 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させるマップ

ルート検索地図の右側に表示されるルートディスプレイですが、中間地点が多いと、トータルでの距離がわかりません。

合計距離だけは表示しておきたいところ・・・・・

下記script朱書き部参考としてください。

以前のサンプルも参照ください。

Read more »

preserveViewport ルート全体を表示させずに地図を指定座標、ズームレベルで表示させる方法/ルート検索API(Direction API)

◆ Google Maps API v3 / preserveViewport ルート全体を表示させずに地図を指定座標、ズームレベルで表示させる方法

通常ルートを表示させるとルート全体が地図のビューポート(地図の表示範囲内)に表示されてしまい、指定した座標、ズームレベルでは表示されません。
ルート全体を表示させずに、希望の座標、ズームレベルで表示させたい場合は、new google.maps.DirectionsRendererのオプションとして、preserveViewport:trueを指定します。

Read more »

通過地点(stopover)の設定(マーカでない経由ポイントを設定)/ルート検索API(Direction API)

◆ Google Maps API v3 / 通過地点(stopover)の設定(マーカでない経由ポイントを設定)

Waypointにしたくない通過地点をルート上に経由ポイントととして指定する場合は、waypointにstopoverをfalseで指定します。

Read more »

Waypoint(中間地点、経由地点)の複数設定+ルートディスプレイ/ルート検索API(Direction API)

◆ Google Maps API v3 / Waypoint(中間地点、経由地点)の複数設定+ルートディスプレイ

ルート検索の基本マップに、複数のwaypoint(経由地点)と+ルートディスプレイを追加していきます。

基本マップはスタート(origin)とゴール(destination)だけでしたが、これにWaypoint(中間地点)を下記の赤字のように追加します。

var request =
{
origin: “東京”,
destination: “大阪”,
waypoints:[
{
location: “静岡”
},
{
location: “名古屋”
}
],

ここで試しておきたいのが locationの指定の方法。基本的には、Google Mapのインフォウィンドウに表示される名称をコピペして張り付ければ、ある程度の大型施設であれば対応してくれます。

Read more »

ルート検索の基本マップ/ルート検索API(Direction API)

◆ Google Maps API v3 / ルート検索の基本マップ

ルート検索APIの基本マップです。スタート地点と終点を指定するだけで、地図右側にルートディスプレイはありません。


Read more »

影付きのカスタムアイコン(マーカー)を作成できるサイト/Google Map Custom Marker Maker


◆ Google Maps API v3 /影付きのカスタムアイコン(マーカー)を作成できるサイト

この「Google Map Custom Marker Maker」 と言うサイト。結構重宝。

以前、同様なカスタムアイコン(マーカー)用の影を簡単に作成できるGoogle Maps API Icon Shadowmaker for Google Maps v3を紹介したが、本日アクセスできなかったので、他のサイトを探していて発見。

自分のPCにあるPNG、GIFファイルからgoogleマップ用のカスタムアイコンを容易に製作できますのでお試しあれ。

Read more »

マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する/Google Maps API V3 (new google.maps.Marker / new google.maps.MarkerImage)

◆ Google Maps API v3 マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する

V3グーグルマップのアイコン(マーカー)の種類を変更するには、いくつかのscriptの書き方があるようです。

まあ用途で使い分ければいいと思いますが・・・・

<サンプル1>

もっとも良く見かける基本のscriptです。単一のマーカー用のイメージ画像とシャドウ(影)を指定しています。

var icon = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var shadow = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var marker = new google.maps.Marker(
{
draggable: true,
raiseOnDrag: false,
icon: icon,
shadow: shadow,
//shape: shape,
map: map,
position: point
});

Read more »

地図のズームレベル(zoom level)を取り出す。条件分岐式 if文 if() else if() else()と条件式switch


◆ Google Maps API v3 /地図のズームレベルを変数として使用する。

以前に作成したこのマップ 地図のズームレベルをvar zoom =  map.getZoom();で取り出して、地図のズームレベルによってデータベースからマーカーを読み出す半径の変数としてつかっていた。

今回、条件式if文にかわるswitchなるものを知ったので試してみた。

Read more »

jQTouch iPhone用Google Maps API V3 地図 でのjQuery click event (クリックイベント)

◆ Google Maps API v3 /jQTouchを使ったGoogle Mapでのclickイベントについて jQtouchをつかったGoogle MapのiPhone(アイフォン)用サイトで、google.maps.event.addListener(map, ‘click’, function()のクリックイベントが機能しないことに気がついた。ほんと知らないことばかり、でどうすればいい。

	google.maps.event.addListener(map, 'click', function() //◆地図をクリックした時
	{
	center = map.getCenter();
	searchLocationsNear(center);
	});

あれ?なんで? そおなんです。通常のサイトで動くscriptが、jQTouchだと動かなくなることが・・・・・ よくよくGoogleのフォーラムをみていたら、jQTouchの場合、jQueryのクリックコマンドがあるとのこと。 Read more »

アイフォンの画面サイズとGoogle Mapのサイズ

iPhone画面サイズ(320×480)

iPhone jQtouch画面内サイズ(320×416)

スポンサードリンク