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>
マーカー色々
1.情報ウィンドウのみ
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.SVGによるマーカー
マーカー生成 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.
3.マーカーの標準
マーカー生成 3 マーカークリックイベントで情報ウィンドウ
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;
}
吹き出しのカスタマイズは、下記のようにCSSで行う
#infodiv{
width:300px;
height:250px;
background-color:#FFF5EE;
}
#infodiv span{
background-color:#ffcc99;
color: blue;
}
]]>
4.テキストマーカー
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の変数は、呼び出し側でグローバル変数として定義しないと
情報ウィンドウが開かない!!!