スポンサードリンク

Tag Archives: marker

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

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 »

バンコク BTS,地下鉄地図-kmlファイルからデータを読み込んで地図にアイコン・マーカー及びレイヤーを表示させる

◆Googe Maps API V3の使い方/kmlファイルからアイコンやレイヤーを読み込んで表示させる方法

kmlファイルからのデータを読み込んでマーカーを表示させる仕方ですが、Google 先生のこのページを参照下さい。

kmlファイルさえ、作成してしまえば、アイコンを地図に好きなように表示できて便利。ポリラインやポリゴン等を地図上にお絵かきするのもとっても簡単。

今回は、タイ バンコクの鉄道の路線図を作成してみます。

  Read more »

Google Street View(ストリートビュー)のConnecting MapにMarkerを表示させるサンプルデモ(Demo)

コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。

MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル(マップコネクト)を掛け合わせて少し調整して完成。

  Read more »

jQTopuch iPhone(アイフォン)のgoogle map でaddListenerのmarker click イベント(event)が働かなくなった。

jQtouchを使ったiPhone(アイフォン)サンプルでGoogle maps api v3のマーカーのクリックイベントがiPhone(アイフォン)デバイス上で働かない。 あれ?ナンかソースいじったかと錯覚してしまった。

PC上では、動きます。

google.maps.event.addListener(marker, ‘click’, function()の部分に問題あり? 冷静に思い返すと、以前は間違いなく動作していた。ここ数週間のうちにiPhone(アイフォン)用に製作したマップのうち、複数のマーカーを表示しているサンプルでアイコンをクリックしてもInfowindowが開かないようになってしまった。(アイコンを単独で指定するソースでは受け付けるが、XMLファイル、MySQLからマーカーを読み込んでいる地図は全滅)

JQtouchのプラグイン側は、自分のサーバ側のソースなのでいじっていないので、Google Map側のサーバで何か変更になったとしか考えらません。今までは問題なく動作していたのに、急に何か変更されても困ります。

ざっとフォーラムを覗いても参考となる情報無し・・・・・がくっ。

jQTouchのscriptとcssをはずすと、iPhone(アイフォン)画面上でマーカーをクリックできるようになりましたので、jQTouchをGoogle Maps API V3で使うのは、原因がわかるまで保留です。

もうjQuery mobileに移行しようかと・・・・・・。

2010/03/14

本日、地震の影響で会社も急遽休業。

時間が出来たので、上記の続きを調べていたら、Google グループのサイトのjQTouchに関連し「Watch out (注意してね)for the new Google Maps V3.4 from March 4th」の文字が目に付いた。

やはり私と同様にaddEventListener がいくつかのマップで働かないとのコメントがある。どうもGoogle Maps API V3の3.4版のリリースに関係があるらしい。

それで読み進めると、トリックは・・・・「A trick is to set draggable=true until the map is shown, then you can set it back to false」とある。おおっ。

しかしよく読むと地図が表示されない場合・・・と書いてある。マーカーをクリックしても反応しない場合と書いてない。無関係か?

試してみた。

				var marker = new google.maps.Marker(
				{
				 map: map,
             			 position: latlng,
            			 icon: icon.icon,
            			 shadow: icon.shadow,
            			 title: name
            			 });

としていたソースの部分にとりあえず、draggable: true,を追加してみた。

				var marker = new google.maps.Marker(
				{
				 map: map,
             			 position: latlng,
            			 icon: icon.icon,
            			 shadow: icon.shadow,
                 draggable: true,
            			 title: name
            			 });

その結果、なんとマーカーをクリックした瞬間、いままで全く無反応であったが、動作した。しかし、これまた理由は不明だが画面が真っ黒に。良くわかりませんが画面遷移に関係しているのか。

falseを指定して改めてiPhone(アイフォン)画面のマーカーをクリックすると、やはり無反応。うーん。一歩前進か?

2011/04/02

やはり、iPhone(アイフォン)用のGoogle MapをjQTouchで製作する必要が出てきましたので、jQtouchのディスカッションフォーラムを見ていると最新情報がありました。 しかもタイトルはずばり「I have solved problems with tap on markers in google maps v3 」。

 

All taps and click on markers were being ignored only when test aplication in the device. But in the PC these problems did not occur. (IOSデバイスでGoogle Mapのマーカータップ(クリック)が無視されるが、PCではそのような問題は発生しない)・・・・・・・とのコメントがあり、まさに同じ現象。

参照先:I have solved problems with tap on markers in google maps v3

これでやっとjQtouchを使ったGoogle Mapを作成できます。感謝です。

 

キモは、下記をjqtouch.jsファイルの条件節に追加記述すればOKと書いてあります。わたしは、jqtouch.min.jsへ追加記述してみました。

 

if ($el.attr('target') == '_blank' || $el.attr('rel') == 'external' || 
$el.is('input[type="checkbox"]') || $el.is('canvas'))

 

 

その結果、javascriptに記載したaddListenerのmarker click イベント(event)がjQtouchでも無事に動作!!!

jQTouchまだまだ何かありそうですが、少しずつ解決されていくのでしょう。とりあえず宿題ひとつ解決です。

 

 

 

XMLファイルから読み込んだマーカー(アイコン)の配列についての検証(2次元配列を理解してみる)


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

◆ Google Maps API v3 / XMLファイルから読み込んだマーカー(アイコン)の配列についての検証

1. 2次元配列

google mapsでたくさんのマーカーを表示させる方法とてfor文が使われていますが、実際はどうなっているのか?

試してみました。

配列を記述したサンプル地図ですが、配列が4列、要素が9行になります。従って、2次元配列で各配列の要素を指定できることになるそうです。

[‘公園1′, 35.760191,140.061629,’kouen’],
[‘公園2′, 35.643033,139.860592,’kouen’],
[‘公園3′, 35.596286,140.141172,’kouen’],
[‘温泉1′, 35.805307,140.16651,’onsen’],
[‘温泉2′,35.717602,139.980167,’onsen’],
[‘温泉3′, 35.42295,139.89739,’onsen’],
[‘水族館1′,36.333294,140.593817,’suizokukan’],
[‘水族館2′, 35.442851,139.644607,’suizokukan’],
[‘水族館3′, 35.728681,139.719765,’suizokukan’]

Read more »

外部XMLファイルでなく内部ソースにマーカー用の配列を記述する。


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

◆ Google Maps API v3 / 外部XMLファイルの変わりにjavascript内にマーカー用の配列を記述する。

XMLファイルを横にらみしながらですと判りずらいので、配列データをコード内に用意します。こんな感じで

	var markers =
	[
	['公園1', 35.760191,140.061629,'kouen'],
	['公園2', 35.643033,139.860592,'kouen'],
	['公園3', 35.596286,140.141172,'kouen'],
	['温泉1', 35.805307,140.16651,'onsen'],
	['温泉2',35.717602,139.980167,'onsen'],
	['温泉3', 35.42295,139.89739,'onsen'],
	['水族館1',36.333294,140.593817,'suizokukan'],
	['水族館2', 35.442851,139.644607,'suizokukan'],
	['水族館3', 35.728681,139.719765,'suizokukan']
	];

左から、ココの要素の名称、座標lat,lng、カテゴリ分けをするための「kouen」「onsen」「suizokukan」です。

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 »

スポンサードリンク