Googlemapでオリジナルアイコンを使用する

Googlemapでオリジナルのアイコンを使用するとき、GooglemapAPIのチュートリアルでは、以下のように指定するように書いてあります。
複雑なアイコン

var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));

Google MAPS API V3 の google.maps.Marker で、既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。を参考に、注釈をつけてみる。

var image = new google.maps.MarkerImage('images/beachflag.png',//アイコン画像パス
new google.maps.Size(20, 32),//(size)アイコン画像のサイズ
new google.maps.Point(0,0),//(origin)アイコン画像表示の起点
new google.maps.Point(0, 32)//(anchor)アイコン画像のどの座標を指定した緯度経度にあてるか
);

この、「(origin)アイコン画像表示の起点」というところと「(anchor)アイコン画像のどの座標を…」が今一つわからなかったので、実直に一つ一つ確かめてみることにしました!
Continue reading

display:noneのGoogleMapが表示したらズレる

管理画面で、地点を登録するときにGoogleMap上を直接たたいて緯度と経度を取得する仕組みを作成。
登録しなくてはならない地点が1点と2点のときがあって、1つの地図でその2つを登録できたらいいんだけど、よくわからないので1点目用と2点目用の地図を用意。
2点目まで登録するのはまれなので、普段は「display:none」でしまっておき、必要な時だけ「display:block;」で表示できるようにしていた。

このとき、「display:block」で表示したmapが左上にずれる。
……まぁ、わからないでもない。

調べていて参考にさせていただきましたー。

display:noneの要素にGoogle Mapsを貼り付ける

私の場合は、こんな感じかな

function HideCBox( boxid ) {
	   var target = document.getElementById(boxid);
	   if( target.style.display != "block" ) {
	      target.style.display = "block";
	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);
	      document.hidebutton.src = "files/close.gif";
	   }
	   else {
	      target.style.display = "none";
	      document.hidebutton.src = "files/open.gif";
	   }
	}

この

	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);

という部分です。
target.style.display = “block”;
の後です。前だと同じようにずれるー。
表示してから、位置の修正ってことですかね。

情報ウィンドウは常に一つ。マーカー移動も。

情報ウィンドウがクリックしただけ表示されるので、一つにしたいのです。
あと、HTMLに地点リストを表示して、その地点リストをクリックしたら、その地点のマーカーを中心にしてウィンドウが開くようにしたい!

<a href="javascript:void(0)" onclick="initialize(1); return false;">□□□□</a>
//データを入れる
var data = [
            [-34.397,150.644,"marker1.png","タイトル1","バルーン",1],
            [-34.882,150.648,"marker2.png","タイトル2","バルーン",2]
            ];

//ウィンドウを記憶
var currentInfoWindow = null;

function initialize(num)
{
	var myOptions = {
	  zoom: 8,
	  center: new google.maps.LatLng(data[num][0], data[num][1]),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};

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

	for (var i = 0; i < data.length; i++){
		createMarker(i,map);
	}

	//初期値が0出なかったら特定の場所にウィンドウを出す。
	if(num != 0){
		clickid(num,map);
	}
}

function createMarker(num,map) {

	var myLatlng = new google.maps.LatLng(data[num][0], data[num][1]);
	var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      icon: data[num][2]
	  });
	var contentString =  data[num][3]+
    '<p><a href="#" target="_blank">参照Webサイト</a></p>';

    var infowindow = new google.maps.InfoWindow({
    content: contentString
     });

	google.maps.event.addListener(marker, 'click', function() {

		//先に開いた情報ウィンドウがあれば、closeする
		if (currentInfoWindow) {
			currentInfoWindow.close();
		}
	      infowindow.open(map,marker);
	      currentInfoWindow = infowindow;
	    });
	}



function clickid(num,map){

	var myLatlng = new google.maps.LatLng(data[num][0], data[num][1]);
	var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      icon: data[num][2]
	  });

	var contentString =  data[num][3]+
    '<p><a href="#" target="_blank">参照Webサイト</a></p>';

	var infowindow = new google.maps.InfoWindow({
	content: contentString
	 });

	//先に開いた情報ウィンドウがあれば、closeする
	if (currentInfoWindow) {
		currentInfoWindow.close();
	}
      infowindow.open(map,marker);
      currentInfoWindow = infowindow;

}

重複しているところもあるけど、ひとまず動いている……。今日はここでおしまい!

複数マーカーの情報ウィンドウが最後の地点のみオープンする

GoogleMapに複数マーカーを落として、マーカーをクリックすると情報ウィンドウが開くというのをしたいのですけど、どのマーカーをクリックしても一番最後のウィンドウしか開かないんです。

//データを入れる
var data = [
            [-34.397,150.644,"marker1.png","タイトル1","バルーン",1],
            [-34.882,150.648,"marker2.png","タイトル2","バルーン",2]
            ];

function initialize()
{

	var myOptions = {
	  zoom: 8,
	  center: new google.maps.LatLng(data[1][0], data[1][1]),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};

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

	for (var i = 0; i < data.length; i++){

		var myLatlng = new google.maps.LatLng(data[i][0], data[i][1]);
		var marker = new google.maps.Marker({
		      position: myLatlng,
		      map: map,
		      icon: data[i][2]
		  });
		var contentString =  data[i][3]+
        '<p><a href="#" target="_blank">参照Webサイト</a></p>';

        var infowindow = new google.maps.InfoWindow({
        content: contentString
         });

		google.maps.event.addListener(marker, 'click', function() {
		      infowindow.open(map,marker);
		    });
		}
}

調べたら同じような問題を解決された方々が…。

forループの中でGevent.addListenerを使う
複数のgoogle.maps.Marker (GMarker) に吹き出しをつける。

ありがとうございます。

ということで、訂正
Continue reading

管理画面で住所を入れたら緯度経度取得その2

いろいろと参考にさせていただいて、自分なりに作ってみたのです。
やりたいことは
1.「住所」に住所が入っている場合、「▲上に記入した住所から緯度経度を取得」をクリックすると、その緯度と経度が自動的に入って、マーカーもその地点にうつる。
2.マーカーの場所が違う場合は、地図を直接クリックする。クリックした場所の緯度と経度が入る。マーカーと地図の中心点もそこに移る。
3.編集の場合は、前のときに入れた緯度と経度の場所が地図に表示される。そして、1や2を行うことができる。

javascript(※新規登録と編集と兼ねているので、編集用フォームに「値があったら」の処理も入ってます)

Continue reading

管理画面で住所を入れたら緯度経度取得

今まで、緯度と経度を管理画面の「緯度」「経度」というところにわざわざ入れてもらう仕様にしていたのですが、住所を入れたら自動取得ってことをしたいなぁと思い、調べ中。

いいところを発見したので、メモ代わりに投稿しておきます。

Google Maps JavaScript APIプログラミング

ありがとうございます。

参考URL追記

http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#LatLng

携帯電話のIPアドレス

Google map staticについて調べていたら、1ビューアあたり1日1000枚というのが上限とありました。
1ビューアを、1携帯だと思っていた私は、「1日1000回もクリックされたりしないだろう」と安心していたのですが、いろいろ調べているうちに「1ビューア → 1IP」らしい。

携帯で、1IPってなに?

と、思った私は勉強不足。
そりゃ、携帯からでもネットに接続する限りはIPがあるっしょ。そして、それが1台に1つならとっくにIP枯渇しとるわい。ということですかね?

と、いろいろ調べているうちに、こんな記事を発見。
携帯電話のIPアドレス(DoCoMo,au,Softbank)

しかし、今になっても「サブネットマスク」がよくわからないの・・・・・・。

IE8でGoogleMapのエラー(表示されない)

3~4回に1回程度、GoogleMapの表示エラーがでます。(下図)

main.jsから来るエラーのようですが、調べていて、どうもIE8でちょっと不具合が出ているらしいです。

IE8とGoogleMap(@WEBいろいろ日記
IE8で Google Mapsの地図をクリックするとポイントがずれるツꀀ(@floatingdays )
IE8とGoogle Mapsのclickイベント(@ここのことはなかったことにするかも)

METAタグでIE7の互換モードにすればよいのではとのことで、実際に導入して突然消えるエラー減りましたが。まったく出てこないわけではありません。
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
原因はなんだろう?

携帯でGoogleMap

今PCでGoogleMapを使って展開している地図を、携帯でも見れるようにしてほしいとのことで、調べてみました。

Google マップが携帯でも表示できるようになりました

ありがとうございます!

<img src=”http://maps.google.com/staticmap
?center=35.65641,139.699477
&markers=35.65660,139.699477,red
&zoom=16
&size=500×300
&key=[ここに Key を記述]”>

お手軽にGoogle Mapsの地図を張り付ける方法 もとてもわかりやすかったです。