スポンサードリンク

Category Archives: Google Maps API v3

全画面フルスクリーン表示を切り替えるボタンを地図内に実装する

グーグルマップの画面内に「地図」「航空写真」を切り替えるボタンがありますが、それと同じようなボタンを設置して、容易にブログに埋め込んだグーグルマップの全画面化を可能にする方法です。

<通常時表示>

「Full Screen」 ボタンが地図右上に表示されている

full1

  Read more »

マーカー(アイコン)をクリックして、そのマーカーを消す

地図に表示したマーカー(アイコン)をクリックして削除する方法

この記事(地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法)のソースに、マーカークリックイベントを追加し、setMapメソッドにnullを指定すればok。

  Read more »

地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法

1.地図をクリックして、マーカー(アイコン)を追加する方法

ポイントは、次の通り

1-1.グローバル変数に、var markersArray = [];を指定

1-2.マップをクリックしたらマーカー追加のイベントを記述

google.maps.event.addListener(map, ‘click’, function(event)
{
marker = createMarker(event.latLng);
markersArray.push(marker);
});

関数function createMarker(latlng)へ渡す

 

2.全てのマーカー(アイコン)を一括で削除する方法

2-1.リセットボタンを設置

<div><a href=”#” onclick=”clearMap();return false;”>リセット</a>

2-2.関数clearMap() の設置/配列を空に

function clearMap()
{
for (var i = 0; i < markersArray.length; i++ )
{
markersArray[i].setMap(null);
}
markersArray = [];
}

Read more »

アイコンが表示されていないただの地図にアイコン(マーカー)を追加する方法

 

このデモマップに複数のマーカーを表示させることは出来ますか?・・とのコメントを頂きました。出来ます。基本的にもともとのソースは変更せずに、足りないソースを追加していきます。

 

1.アイコンの表示設定

地図にどんなアイコンを表示させましょうか。Google Mapの標準アイコンもあれば、自作アイコンなどもありますよね。ここでは、Googel Mapで使用されている標準アイコンを使うことにします。

表現のソースはコチラのページ ”マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する” の「サンプル4」にしましょう。

Read more »

WordPressの記事内にGoogle Mapを表示する(復習)

WordPressの記事内にグーグルマップを表示させてみます。

今回の使用したテーマは、Twenty Ten 1.3

Read more »

ポリライン polylineを簡単に地図の中に書くためにエンコード化する方法とツール

地図をクリックして、エンコード化されたポリラインを貼り付ける方法が、地図に線を描く方法としては便利そうです。

今回は、そのポリラインをエンコード化する方法ためのツールとして、Google先生のデモマップをいじって自分好みに使いやすいように直しておきます。

 

地図をクリックしてポリラインを描いた後にアイコンを移動させたり、削除しても逐一エンコードされたポリラインが表示されるように変更してみました。

  Read more »

緯度と経度をエンコード化して、簡単に地図の中に複数の線を書く(ポリライン polyline)

地図の中に簡単に線が書けないものか・・・・・。ポリラインの座標をいちいち入力してられないですよね。

ふとGoogle先生のデモを見ていて、エンコード済みポリラインを使う方法があることに気がつきました。これは便利そう。

 

さて、本題・・・

Read more »

Google Adsense グーグルアドセンスを地図の中に表示する方法

グーグルから広告が少ない。もっと大きい広告にして数も増やせとのメールが来たのですが、さてどこに広告を貼り付ければ良いのか。調べていたら地図の中にもアドセンスを表示できるのですね。

 

Google Adsense グーグルアドセンスを地図の中に表示する

 

Read more »

Google Maps API v3 + 外部XMLファイル + サイドバー(sidebar)の復習

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる」の記事が良くわからないとのコメントを頂いたので再度ポイントを復習してみます。

 

 

この地図は、外部に用意したxmlファイルからデータを引っ張ってアイコンを表示させるもの。ただし、xmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php」は、MySQL+phpで作成しているのでデータベースを利用していない場合には、テキストエディタで作成すれば良し。gmarker.xmlというファイル名にしてあります。サンプルは、コチラ「xmlファイルサンプル」。

②続いてdownloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。downloadxml.jsをダウンロードしてご自分のサーバにアップ

③最後に上記①のxmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml」をご自分のPCに保存後、自分のサーバにアップロード。その後、下記の赤字の部分だけを自分のサーバURLに書き換えればOKです。これで動くはずですが・・・・。

Read more »

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

メトロスタジオMetro Studio1は、アイコンのサンプルも少なく、自分で自由にGoogle Map用のアイコンが作れなかったのですが、Metro Studio2(いまなら無料)は、いいです。

 

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

 

 

Read more »

1 / 1012345...10...最後 »

スポンサードリンク