mm_widget_googlemapウィジェットでマップにマーカーが表示されない。 【解決済み】

[mojira]

-----
[サーバ]
　ホスト&契約タイプ:　sixcore
　ネットワーク: インターネット
　Apacheバージョン 2.2.3
OS Linux
　PHPバージョン: PHP5.1.6
　DB: MySQL5.0.22
[modx]
　バージョン: modx-1.0.5J-r9
　プラグイン: ManagerManager
[クライアント]
　ブラウザ: chrome
-----

こんにちは、お世話になります。

http://modx.jp/news/472.html
↑コチラのページの中ほどで紹介されている、mm_widget_googlemapウィジェットの件でご質問させて頂きます。

現在製作中のサイトに組み込みたいのですが、googlemap内にマーカーが表示されないのです。
正確には、MODｘ編集画面ではピンが表示されていますが、サイトプレビューした際にはマーカーが表示されません。

これは、エラーではなく仕様なのでしょうか。　
仕様だとした場合、マーカーを立てる方法などは、ManagerManagerをカスタマイズするしか無いのでしょうか。

お忙しいところ申し訳ございませんが、分かる方がおられましたらヒントだけでもご教授頂ければ幸いです。

また、マップを編集画面で設定をしていると、chromeで「プレビュー」ボタンが効かなくなりました。※IE9では大丈夫です。

制作中のサイトに関しては、解決の近道になるのでしたら、管理画面のIDやURLをお伝えいたします。

どうぞ宜しくお願い申し上げます。


*****追伸*****
テンプレート変数のCustom　Widgetを変更することでマーカーがでました！

<iframe width="610" height="400" frameborder="0" src="http://maps.google.co.jp/maps?q=[+value+]&output=embed&z=15"></iframe>

ただ、マーカーが2つでるので、もう少し手直ししてみたいと思います。

添付画像つけました。

緑の矢印のマーカーは編集画面で設定した位置に正確な場所を指しています。
赤い丸のマーカーでは、緑のマーカー近辺の住所が基準になっいているようです。

[yama]

パラメータがqではないような気がします。実際にGoogle Mapsを表示してみると分かると思います
Chromeでプレビューボタンがきかないというのが気になります。もしよければ画面見てみますヨ

[yama]

http://imakoko.didit.jp/imakoko_html/me ... oogle.html
qでもいいみたいですがllのようですね

[mojira]

yamaさん、おつかれさまです。m(_ _)m

>qでもいいみたいですがllのようですね

最初はllにしていたのですが、llだと、マーカーが表示されなかったので、qに変更していました。

＞Chromeでプレビューボタンがきかないというのが気になります。もしよければ画面見てみますヨ

ありがとうございます！！

yamaさん宛にメッセージを送りますので、宜しくお願い申し上げます。

[mojira]

とりあえず、yamaさんの助けを借りながら自己解決いたしました。

CustomWidgetを以下のように記述した所、上手く行きました。

<iframe width="610" height="430" frameborder="0" src="http://maps.google.co.jp/maps?q=[+value+]+([*住所*])&output=embed&z=13"></iframe>

入力画面では地図上で座標を選んで、新しく作ったテンプレート変数の「住所」に建物の名前などを任意で入れてもらう感じです。
これなら、「ココに11時に集合」とかフキダシに表示できるので、案外良いかも知れないと考えています。

yamaさん、色々とご尽力頂き、ありがとうございました！

[yama]

ずいぶん簡単に解決できましたね（たった一行）。実際に出力を見てみましたが、Google側が賢くエンコード処理を行なって出力を返してくれるみたいです。問題なしですね。
管理画面も少し見させていただきましたが、分かりやすいと思いました。また事例掲載期待してます

[mojira]

googlemMaps のJavaScript API バージョンが上がった事と関連して、備忘録的に記事を残します。

簡単な例ですが、マップのフキダシにリソース記事のタイトルを表示させる例です。

まずは、ManagerManagerのチャンクに書かれている、古いバージョン用のAPIコードを削除、以下のような感じにします。

コード: 全て選択

mm_widget_googlemap('テンプレート変数','','35.68407, 139.63623');

緯度経度の値はディフォルト時に表示されるものを記入ください。


次に、テンプレート変数のCustom Widgetには

コード: 全て選択

<div id="map" style="width:714px;height:400px;border:3px solid #cccccc;"></div><br>

    <script type="text/javascript">

		var latlng = new google.maps.LatLng([+value+]);
		var myOptions = {
			zoom: 13,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map"),
		myOptions);
				var marker = new google.maps.Marker({
				map: map, 
				
				position: map.getCenter()
			});

                //吹き出しを作成します
                var contentString = '<strong style="font-size:16px">[*pagetitle*]</strong><br />地図の場所は実際の場所と一致しない場合があります。';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString  //吹き出し内コメント
                });

                //吹き出しをオープンします
                infowindow.open(map,marker);

                //クリックしたときに吹き出しがオープンするイベントを定義します
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });

			</script>

上記のように記述します。吹き出し内コメントについては、[*pagetitle*]が入っていますが、自前のテンプレート変数なんかでも勿論OKです。

最後に、HTMLのヘッダー部分に以下のリンクを付けます。これは、スマートフォンなどで自分の位置情報を取得するのかどうかのリンクです。
sensor=falseで取得しません。　sensor=trueで取得ですね。　この判定リンクが無いとエラーになってしまうので、現在位置取得の有無に関わらず必ず入れる必要があります。

コード: 全て選択

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

さｔらにカスタマイズする場合はhttp://waox.main.jp/news/?page_id=1086　などの記事が参考になるかも知れません。