地図上のマーカーを条件により色を変えること、吹き出しをクリックで作る方策に関して

[ぺた]

はじめまして、よろしくお願い致します。

以下URLのサンプルコードを参考にさせて頂き、場所を固定し、そこに固有のIDを与え、固有の場所にはマーカーが付き、そこをクリックすると画像やメモが表示されるモノが作りたいと考えています。また、固有IDを指定し、その他の情報（画像、メモ）を更新させたいとも考えています。

http://sakitake4.blogspot.jp/2011/04/google-app-engine-maps-web.html?spref=tw

プログラムの経験は皆無に近いです。しかし、今回は勉強で上述したようなマイナーチェンジ？が出来ないか試そうとしています。

言い訳ではありますが、質問自体拙い箇所があるかと思いますが、ご容赦下さい。

以下二点を解決すべく取り組んでいます。

・デフォルトはマーカーが地図上に表示され、そのマーカーをクリックすると情報（写真、メモ）が表示されること

サンプル（下記）を基にマーカーをつけることは出来ました。

なので、その点だけはクリアしているのですが、代わりに元々の機能にあった吹き出しが出なくなりました。

マーカーをクリックすると吹き出しが出る、というサンプルは幾つかあり、それは試してはいます。しかし、私自身正しい方向性で作れていないためか想定通りの動きをしていない状態です。マーカーだけが表示され、クリックしても吹き出しは表示されません。

 

・マーカーの色を条件によって変えること

ただマーカーをつけるだけではなく、例えばある特定の場所に喫煙場所がある→青、喫煙場所は無い→赤というように条件で色を変えたいのです。

放射線量を表示するサイトでまさにマーカーの色を変えて表示されているので、出来るだろう思っています。

尚、緯度経度、メモ、画像情報はGoogle App Engineに持たせています。

 

皆様のお知恵を拝借させて頂ければ幸甚です。

お忙しい中、お時間を割いて読んで頂きありがとうございました。

 

※次のファイルの {% for image in images %}以下で修正が必要と思っておりますが、手がとまっています。

<!-- -*- coding: utf-8 -*- -->
<script type="text/javascript">

var map;
var zoomLevel = 5;
var infoWindows = new Array();
var preId = null;

function onZoomChanged() {
 map.setCenter(infoWindows[preId].getPosition());
}

function onListItemClicked(id) {

 if (preId != null) {
  infoWindows[preId].close();
 }
 map.setCenter(infoWindows[id].getPosition());
 infoWindows[id].open(map);
 preId = id;
}
 

function initialize() {

 var latlng = new google.maps.LatLng(35.69836, 139.773104);
 var myOptions = {
 zoom: zoomLevel,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 google.maps.event.addListener(map, 'zoom_changed', onZoomChanged);

 {% for image in images %}
 var infoLatLng = new google.maps.LatLng({{image.geo.lat}}, {{image.geo.lon}});
 var infoWindow = new google.maps.InfoWindow({
  content: '<div><a href="/img?key={{image.key}}"><img src="/img?key={{image.key}}&width=100" align="left"></a></div><div>{{image.author}}<br></div><br><div>{{image.title}}</div><br><div>{{image.place}}</div><br><div>{{image.createdTime}} (JST)</div><br><div>{{image.comment}}</div><br><br><div>コメント/div><br>',
  position: infoLatLng
  });

 infoWindows["{{image.key}}"] = infoWindow;
 if (preId == null) {
  preId = "{{image.key}}";
  infoWindows[preId].open(map);
 }
 {% endfor %}

}

</script>

[Masashi.K]

ぺたさん

頂いたソースコードを元に、作り替えてみました。
App Engineにデプロイまでしてはいないのですが、たぶん動くでしょう。

Google Maps APIの機能そのものに、マーカーの色を変える機能はありません。
マーカーの画像を自分で用意する必要があります。

各個別のマーカーごとに情報ウィンドウの内容を変更する方法ですが、
createMarker() という関数の中で行なっています。
関数の中でHTMLの文字列を作成することで、マーカーをクリックした時に
それぞれの内容を維持/表示するようになっています。

<script type="text/javascript">
var map;
var zoomLevel = 5;

var infoWindow = null;
var markerDic = {};
var preId = null;

//ズームレベルが変更になったら実行する
function onZoomChanged() {
//最後にクリックされたマーカーの位置を中心位置にする
map.setCenter(markerDic[preId].getPosition());
}


//リストがクリックされたら実行する
function onListItemClicked(id) {
//マーカーを擬似クリックする
google.maps.event.trigger(markerDic[id], "click");
}


function initialize() {
//地図を表示するのに必要なパラメータ

var latlng = new google.maps.LatLng(35.69836, 139.773104);
var myOptions = {
zoom : zoomLevel,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};

//地図を作成する

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//情報ウィンドウを1つだけ作成する
infoWindow = new google.maps.InfoWindow();

//ズームレベルが変更になったら、onZoomChanged を実行する
google.maps.event.addListener(map, 'zoom_changed', onZoomChanged);

//カテゴリに応じた画像を自分で用意する必要があります
var categories = {
"red" : "/img/markers/red.png",
"blue" : "/img/markers/blue.png"
};

{% for image in images %}

//マーカーを作成する関数(createMarker)にデータを渡す。
//関数からは、作成されたマーカーが返される
var marker = createMarker({
map : map,
position : new google.maps.LatLng({{image.geo.lat}}, {{image.geo.lon}}),
image_key : "{{image.key}}",
image_author : "{{image.author}}",
image_title : "{{image.title}}",
image_place : "{{image.place}}",
image_createdTime : "{{image.createdTime}} JST",
image_comment : "{{image.comment}}",

//カテゴリの条件によって、画像が変わるようにする
image : categories["blue"]
});

//マーカーの配列に追加する
markerDic["{{image.key}}"] = marker;

if (prefId == null) {
//一番最初に作成したマーカーを擬似クリックすることで、情報ウィンドウを開く
google.maps.event.trigger(marker, "click");
}
{% endfor %}
}

function createMarker(options) {
//HTMLの文字列を作成する
var html = [
'<div>',
'<a href="/img?key=' + options.image_key + '">',
'<img src="/img?key=' + options.image_key + '&width=100" align="left">',
'</a>',
'</div>',
'<div>',
'<div>' + options.image_author + '<br></div><br>',
'<div>' + options.image_title + '</div><br>',
'<div>' + options.image_place + '</div><br>',
'<div>' + options.image_createdTime + '</div><br>',
'<div>' + options.image_comment + '</div><br>',
'<br><br><div>コメント</div><br>',
'</div>'
].join("");


//マーカーを作成する
var marker = new google.maps.Marker({
map : options.map,
image : options.image

});

//クリックされたら、情報ウィンドウを開く
google.maps.event.addListener(marker, "click", function() {
//最後にクリックされたキーを記憶しておく
prefId = options.image_key;

//情報ウィンドウの内容を更新する
infoWindow.setContent(html);

//表示する
infoWindow.open(options.map, marker);x
});
return marker;x
}
</script>

[ぺた]

Masashi様

早々にコードをお作り頂き、ありがとうございました。
マーカーは自分で用意する必要があったのですね、単純に色を変えられるとばかり思っていたので勉強になりました。
早速作成頂いたコード、マーカーを用意し、試しています。
どうもapp.yamlの設定なのか、マーカーの保存場所が正しくないのか、想定している動きにはなっていませんが、基礎部分だと思いますので、調べて、試してみます。

Masashi様には、お忙しい中、お時間を割いていただき、重ね重ねではありますが、誠にありがとうございました。このコード自体、勉強になりますので、正常動作した暁にはご報告いたします。


2012年12月3日月曜日 7時50分50秒 UTC+9 Masashi.K:

[ぺた]

Masashi様

現状ですが、想定通りには動いておりません。
自分で調べて解決する予定でしたが、思うようには行かず、再度お知恵を拝借させて頂きたく、投稿した次第です。
ひとまず、マーカー＋吹き出しが出来ないか、試しています。

・マーカーを変更させず、マーカー＋吹き出しが出るか試したのですが、NGでした。
（ image : categories["blue"] のコメントアウト）
・マーカーだけを表示させることもしてみましたが、NGでした。
マーカーだけを表示させられた以前のコードに（以下の部分を）置き換えて、試すとマーカーは一つきりしか表示されない状態となってしまったりしています。
------変更箇所------

      var marker = createMarker({
        map : map,
        position : new google.maps.LatLng({{image.geo.lat}}, {{image.geo.lon}}),

・マーカーだけを表示させて、 function initialize() { 以下を削除するとマーカーだけは表示されました。

その他、マーカー＋吹き出しで得られた情報を幾つか抽出し、トライしているもののゴールはまだ未明です。
上述しましたように幾つかのサイトを読んではいるものの、理解が出来ていないせいか、誤解をしたまま作成頂いたコードに手を出している感は否めません。
どの辺りが肝になるのか、アドバイス、参考になる資料、ご指摘点等ございましたら頂ければ幸甚です。
再度お手数及びお時間を割いて頂くこととなり、申し訳ございません。、


2012年12月3日月曜日 14時10分14秒 UTC+9 ぺた:

[ぺた]

解決出来ました。
Masashi様のコードを再度見直し、自分が当初用意したコードを見直し、どうやれば良いのか少々考え、幾つかのサイトをめぐることでヒントを得ることが出来ました。
マーカー＋吹き出し、ある条件でマーカーを変更する、いずれもクリア出来ました（とは言え、若干マーカーの位置がずれているのでまだまだ道半ばではあります）。
クリアすべき項目はあるので、また問い合わせをさせて頂くかもしれませんが、その際は宜しくお願い致します。
今回の御協力、誠にありがとうございました。

2012年12月6日木曜日 18時55分04秒 UTC+9 ぺた:

[Masashi.K]

ぺたさん

資料という意味では、Google Maps APIプログラミング入門 改訂2版 がオススメです。
プログラミングの初心者から中級者向けに、大量のサンプルコードと解説で説明しています。

この機能はなんなのか、各プロパティや定数がどうゆう意味を持つのか、どうやって使うのか、などを
徹底的に解説しています。
今日、Google 本社に行ってGoogle Maps チームの人達と話をした時に
この本を見せてきましたけど、
「全機能を徹底的に解説しているのはすごいね！英語で出してくれよ」って言ってくれました。

ということで、もし宜しければどうぞ。

Google Maps APIプログラミング入門 改訂2版
http://goo.gl/0edoY

On Dec 13, 10:04 pm, ぺた <demomaps...@gmail.com> wrote:
> 解決出来ました。
> Masashi様のコードを再度見直し、自分が当初用意したコードを見直し、どうやれば良いのか少々考え、幾つかのサイトをめぐることでヒントを得ることが出来 ました。