スポンサードリンク

Tag Archives: Google Maps API v3

始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。


◆ Google Maps API v3 / 複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

Google Maps API V3で大量多数マーカー(アイコン)多数ののmarkerデータを読み込んだ後に、一つだけ最初から希望するインフォインフォウィンドウ(infowindow)を開いておく(表示させる)案がないか考えていきます。

ともかく、XMLファイルからマーカー(marker)を配列に読み込んで、配列から希望する要素のインフォウィンドウを表示する手段を下記の順で検討してみました。

当方素人ですので、あくまで参考程度で・・・・。

Read more »

インフォウィンドウのサイズの大きさを指定変更する方法

◆ Google Maps API v3 / インフォウィンドウのサイズの大きさを指定する方法

インフォウィンドウのサイズ指定についてメモ。

インフォウィンドウっていざいろいろやろうとすると結構難しい。

何も指定しなくとも画像を指定すれば、勝手にちょうど良い大きさに変わってくれるのですが・・・・・・・・

大きさを指定したい場合は、次の案があります。

Read more »

YouTube動画を情報吹き出し(インフォウインドウ)に表示する

◆ Google Maps API v3 / Youtube動画を吹き出し(インフォウインドウ)に表示する

Youtubeの動画をインフォウィンドウ(infowindow)に表示させてみます。

1.先ずYouTubeにアクセス

YouTubeサイト

2.YouTube動画の下部にある埋め込みコードをコピペして

3.infowindowの吹き出しコンテンツに貼り付けます。

Read more »

合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる/ルート検索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 »

3 / 512345

スポンサードリンク