Google MAPS API

Version3になって変わったこと APIキーが不要になったいちいちホームページ事にAPIキーを取得しなくて良くなったので、とっても便利になりました。 iPhone／Androidへの対応スマートホン向けに地図を高速に表示できる様になりました。

使ってみる

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
 Google Maps V3で地図を表示する 
   
  
</head> 
<body> 
 <div id="gmap" style="width : 500px; height : 500px;">/lt;/div> 
</body> 
</html>

マーカー色々

１．情報ウィンドウのみ

var latlng = new google.maps.LatLng(35.539001,134.228468);
var iwopts = {
  content: 'Hello　World',
  positon: new google.maps.LatLng(35.331512652927486, 139.45270836353302)
};

var infowindow = new google.maps.InfoWindow(iwopts);
infowindow.open(map);


地図の左上に表示される。マーカーと組み合わされて意味を持つ

2.ＳＶＧによるマーカー

マーカー生成２ CIRCLE

 　function createMarker2(map, latlng, text) {
		var infoWndOpts = {
			content : text,
		};
		var infoWnd = new google.maps.InfoWindow(infoWndOpts);
		
		var markerOpts = {
			position : latlng,
                        
                        icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        fillOpacity: 0.5,
                        fillColor: '#FF0000',
                        strokeOpacity: 1.0,
                        strokeColor: '#ffffff',
                        strokeWeight: 5.0, 
                        scale: 7 //pixels
                        },
                        draggable: true,
			map : map
		};
		var marker = new google.maps.Marker(markerOpts);


		google.maps.event.addListener(marker, "click", function(){
			//先に開いた情報ウィンドウがあれば、closeする
			if (currentInfoWindow) {
				currentInfoWindow.close();
			}
			//情報ウィンドウを開く
			infoWnd.open(map, marker);
			
			currentInfoWindow = infoWnd;
		});
		return marker;
	}

google.maps.SymbolPath.CIRCLE A circle. を使うのが特徴である、その他、下記がある。 google.maps.SymbolPath.BACKWARD_CLOSED_ARROW A backward-pointing arrow that is closed on all sides. google.maps.SymbolPath.FORWARD_CLOSED_ARROW A forward-pointing arrow that is closed on all sides. google.maps.SymbolPath.BACKWARD_OPEN_ARROW A backward-pointing arrow that is open on one side. google.maps.SymbolPath.FORWARD_OPEN_ARROW A forward-pointing arrow that is open on one side.

３．マーカーの標準

マーカー生成　３マーカークリックイベントで情報ウィンドウ

function createMarker(map, latlng, text,icon) {
		var infoWndOpts = {
			content : text,
		};
		var infoWnd = new google.maps.InfoWindow(infoWndOpts);
		
		var markerOpts = {
			position : latlng,
                        icon : icon,
			map : map
		};
		var marker = new google.maps.Marker(markerOpts);


		google.maps.event.addListener(marker, "click", function(){
			//先に開いた情報ウィンドウがあれば、closeする
			if (currentInfoWindow) {
				currentInfoWindow.close();
			}
			//情報ウィンドウを開く
			infoWnd.open(map, marker);
			
			currentInfoWindow = infoWnd;
		});
		return marker;
	}

吹き出しのカスタマイズは、下記のようにＣＳＳで行う



 #infodiv{

width:300px;

height:250px;

background-color:#FFF5EE;

}

#infodiv span{

  background-color:#ffcc99;

  color: blue;

}
]]>

４．テキストマーカー



function myTextBox(map, lat, lng, myTxt1,myTxt2) {
   this.lat_ = lat;
   this.lng_ = lng;
   this.txt1_ = myTxt1;
   this.txt2_ = myTxt2;
   this.setMap(map); 
}
 
var currentInfoWindow = null;
myTextBox.prototype = new google.maps.OverlayView();
 
myTextBox.prototype.onAdd = function() {
   if (!this.div_) {
      this.div_ = document.createElement( "div" );
      this.div_.style.position = "absolute";
      this.div_.style.fontSize = "10px";
      this.div_.style.width = 90;
      this.div_.style.textAlign = 'center';
      this.div_.style.display = 'inline';
      this.div_.style.backgroundColor = '#ffcc99';
      this.div_.style.padding = "2px 0px";
      this.div_.style.border = "1px solid #000066";
      this.div_.innerHTML = this.txt1_;
      var panes = this.getPanes();
  
      panes.overlayImage.appendChild(this.div_);
//      panes.overlayLayer.appendChild(this.div_);
     panes.overlayImage.style['zIndex']= 104;

   }
}
 
myTextBox.prototype.draw = function() {
   var point = this.getProjection().fromLatLngToDivPixel( new google.maps.LatLng( this.lat_, this.lng_ ) );
   this.div_.style.left = (point.x - (this.div_.offsetWidth / 2)) + 'px';
   this.div_.style.top = (point.y - (this.div_.offsetHeight / 2)) + 'px';
   var that = this;
   google.maps.event.addDomListener(that.div_, "click", function() {
     
       
      var infowindow = new google.maps.InfoWindow({
      content: that.txt2_,

      position: new google.maps.LatLng( that.lat_, that.lng_ )  
      });


      if (currentInfoWindow) {
				currentInfoWindow.close();
			}
			//情報ウィンドウを開く
			infowindow.open(map);
			
			currentInfoWindow = infowindow;

  //     alert("クリックしました　：　"+that.txt2_);

   });
}

注意点として、mapの変数は、呼び出し側でグローバル変数として定義しないと情報ウィンドウが開かない！！！