2012年03月06日

google map infowindow 開閉 toggle

お願いします♪いいねとかつぶやいたりして下さい
 
googleマップに open closeでやれると書いてあるが、できねーじゃん。
だいたいtoggleくらいつけとけよ。グーグルさんよ。

で、infowindowを toggle する方法がこれ。

<script type="text/javascript">

var data = new Array();
var win = new Array();
var openFlag = new Array();//infowindwoが開いているかのフラグ


$(function() {
  
function attachMessage(i,marker, msg) {

	//infowindowを開閉したときの処理を設定
	win[i] = new google.maps.InfoWindow({
		content: msg
	});
	
	//基本は開いてません
	openFlag[i] = 0;
	
	
	//マーカーをクリックした際に 開いていれば 閉じる 閉じていれば 開く という処理をする
	google.maps.event.addListener(marker, 'click', function(event) {
		if(openFlag[i] == 1){
			win[i].close();
			openFlag[i] = 0;
		} else {
			win[i].open(marker.getMap(), marker);
			openFlag[i] = 1;
		}
	});
	
	
	}
	
	// 位置情報と表示データの組み合わせ
	data.push({position: new google.maps.LatLng(35.7907, 139.8), content: 'サスケ' ,  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=サスケ|66ccff|000000'});data.push({position: new google.maps.LatLng(35.7, 139.673), content: 'のぶ' ,  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=のぶ|66ccff|000000'});data.push({position: new google.maps.LatLng(35.1749, 136.876), content: 'ひでき' ,  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=ひでき|66ccff|000000'});data.push({position: new google.maps.LatLng(35.1749, 136.876), content: '万太郎' ,  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=万太郎|66ccff|000000'});data.push({position: new google.maps.LatLng(35.6936, 139.716), content: 'マモル' ,  icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=マモル|66ccff|000000'});
	
	var myMap = new google.maps.Map(document.getElementById('map'), {
		zoom: 10,
		center: new google.maps.LatLng(35.71, 139.83),
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	
	for (i = 0; i < data.length; i++) {
	var myMarker = new google.maps.Marker({
	  position: data[i].position,
	  map: myMap,
	  icon: data[i].icon
	});
		attachMessage(i,myMarker, data[i].content);
	}

});
</script>
関連するタグ: javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ