1件ずつ表示 
--.--.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

続きを読む
Category: スポンサー広告
2015.06.12 Fri

マーカ色々

マーカー色々

1.情報ウィンドウのみ

// マーカー生成 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.テキストマーカー
var mes1 =
'大庭の史跡 < a href="html/markerdata1.html" target="_blank" a="">
/lt;img width="200" height="150" src="html/funajizo.jpg" />
' ;

var customOverlay1 = new myTextBox(map,35.35755217928927, 139.4529390335083,"舟地蔵",mes1);


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の変数は、呼び出し側でグローバル変数として定義しないと
情報ウィンドウが開かない!!!






スポンサーサイト

続きを読む
Category: インターネット Comments (0) Trackbacks (0)

この記事へのコメント:

この記事へコメントする:

    

この記事のトラックバックURL:

http://xmod60.blog85.fc2.com/tb.php/1075-2aba9ded

この記事に対するトラックバック:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。