2012年11月06日

Google Maps APIのジオエンコーディングで住所から経度緯度を取得

Google Maps APIのジオエンコーディングで住所から経度緯度を取得する方法

google.maps.Geocoder()からgeocoderオブジェクトを生成して取得する。

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: '住所' },
function( results, status ){
if( status == google.maps.GeocoderStatus.OK ){
var latlng = results[ 0 ].geometry.location;
console.log( latlng.lat() , latlng.lng() );
}else{
alert( '取得できませんでした > < \n:' + status );
}
});


コールバック関数内ではresults[ 0 ].geometry.locationでlatlngオブジェクトが取得できるので。
posted by ねこまんま at 11:06 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年12月20日

Google Maps APIのV3でナビゲーションを変更する

Google Maps APIのV3でナビゲーションを変更する方法

var mapOptions = {
zoom: 8,
navigationControlOptions : {
style : google.maps.NavigationControlStyle.ZOOM_PAN
} ,
center: new google.maps.LatLng(123,456),
mapTypeId: google.maps.MapTypeId.ROADMAP
}


navigationControlOptionsにstyleでgoogle.maps.NavigationControlStyle.ZOOM_PANを指定すると大きいzoomコントロールになる。
タグ:Google Maps API
posted by ねこまんま at 16:17 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年10月28日

Google Mapでマーカーに複数の情報ウィンドウを表示

Google Mapのv3でマーカーに複数の情報ウィンドウを表示する方法。

for(key in items){
createMarker(
new google.maps.LatLng(
lat,lng
) ,
new google.maps.InfoWindow({
content: text
})
);
}
var currentInfoWindow=null;
function createMarker(LatLng,infoWindow){
var marker = new google.maps.Marker({
position: LatLng,
map : map,
});
google.maps.event.addListener(marker, 'click', function() {
if (currentInfoWindow)currentInfoWindow.close();
infoWindow.open(map,marker)
currentInfoWindow = infoWindow
});
}


v3から自分でウィンドウを閉じなくてはいけなくなったのでフラグ用の変数(currentInfoWindow)で管理。あと値をクロージャーuで閉じ込めておくのを忘れずに。
タグ:Google Map
posted by ねこまんま at 02:59 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年09月08日

Google Maps APIでズームコントローラーの最大値、最小値を設定する

Google Maps APIでズームコントローラーの最大値、最小値を設定する方法、各マップタイプのgetMinimumResolutionメソッドとgetMaximumResolutionメソッドをオーバーライドすることで設定が可能です。

map.addControl(new GLargeMapControl());
var maptypes = map.getMapTypes();
for (var i = 0; i < maptypes.length; i++) {
maptypes[i].getMinimumResolution = function() {
return 3;//minimum size
};
maptypes[i].getMaximumResolution = function() {
return 10;//max size
};
}
タグ:Google Map
posted by ねこまんま at 05:03 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年04月25日

Google Maps API V3ではgetBoundsZoomLevelが使えない

Google Maps API V3ではgetBoundsZoomLevelが使えない。色々と対策があるけど個人的には以下の方法がおすすめ。

var flag=1;
var boundsHandle = google.maps.event.addListener(map, 'bounds_changed', function() {
flag=0;
if(!map.getBounds().contains(minDistancePositon)){
map.setZoom(--zoom);
}else{
google.maps.event.removeListener(boundsHandle);
//処理
$("#mapOverlay").remove();
}
});
if(map.getBounds() && flag==1 && boundsHandle){
map.setZoom(--zoom);
}


minDistancePositonには含めたい座標がはいっている。bounds_changedに処理をbindしておきsetZoomでズーム率を変更していく。containsで処理したい領域が含まれるまで変更。ズームの変更が終わったらunbind。

extendを利用するのが一般的だと思うけど、今回はちょっと用途が違うので(中央の座標を維持しておきたい)
posted by ねこまんま at 05:05 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年04月24日

Google Maps API V3でカスタムオーバーレイを実装

Google Maps API V2でカスタムオーバーレイを実装がV3から利用できない。V3では次のように実装

var infoWindow;
function showBlowing (lat,lng){
if(infoWindow)infoWindow.remove();
infoWindow = new Blowing(lat,lng);
}

function Blowing(lat,lng){
this.position = mnew google.maps.LatLng(lat,lng);
this.setMap(map);
}
Blowing.prototype = new google.maps.OverlayView();
Blowing.prototype.draw = function() {
if(!this.div_){
this.div_ = document.createElement( "div" );
this.div_.style.position = "absolute";
this.div_.innerHTML = 'hogehoge';
var panes = this.getPanes();
panes.floatPane.appendChild( this.div_ );
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
this.div_.style.left = point.x + 'px';
this.div_.style.top = point.y + 'px';
}
Blowing.prototype.remove = function() {
$(this.div_).remove();
delete this;
}


V3になったさいの微妙な変化がめんどくさい
タグ:Google Maps
posted by ねこまんま at 18:47 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2011年04月16日

XperiaでGoogle Maps APIにアイコンを設置するとぼやける問題

XperiaでGoogle Maps APIにアイコンを設置するとぼやける。見れた物じゃない。

var icon = new google.maps.MarkerImage(
"images/marker@2x.png" , //url
new google.maps.Size(35,103),//size
new google.maps.Point(0,0),//origin
new google.maps.Point(9,52),//anchor
new google.maps.Size(18,52)//scaledSize
);


原因はscaledSize、高いdevicePixelRatioデバイス用に高解像度のアイコンを用意し縮小して表示していたけどそれが原因っぽい。他のAndroid2.1端末ではちゃんと表示できたのでXperia独自のバグっぽい。

var icon = new google.maps.MarkerImage(
"images/marker@.png" , //url
new google.maps.Size(18,52),//size
new google.maps.Point(0,0),//origin
new google.maps.Point(9,52),//anchor
);


scaledSizeは指定しなければちゃんと表示される。
posted by ねこまんま at 05:37 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

Google Maps API V3で地図を表示

Google Maps API V3から表記がかなり変更している。
地図の表示は次のように行います。

var map = new google.maps.Map($("#map").get(0),{
zoom: 14,
center: new google.maps.LatLng(35.68750000013729,139.70305560012278),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true ,
navigationControl : true ,
});


基本的には今までとできることは変わりませんが、細かい所でメソッド名や方法が変わっていたりでGoogle Maps API V2のときとは違うので要注意。
タグ:Google Maps API
posted by ねこまんま at 03:24 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2009年04月14日

カスタムオーバーレイを固定位置に配置

Google map apiで通常カスタムオーバーレイを配置するとビューポイントに合わせて配置されて、マップの移動に追随する。

追随したくない場合はmoveend(もしくはmove)イベントで表示位置を調整すればおk

var div = $("<div></div>");
map.addOverlay(new customBox(div.get(0)));

GEvent.addListener(map, "moveend", function(){
var latlngbounds = map.getBounds();
var southwest = latlngbounds.getSouthWest();
var northeast = latlngbounds.getNorthEast();
var north = northeast.lat();
var west = southwest.lng();
var northwest = new GLatLng(north,west)
var pixelnorthwest = map.fromLatLngToDivPixel(northwest);
$(div).css({
position:"absolute",
left:pixelnorthwest.x+"px",
top:pixelnorthwest.y+"px"
})
});


Google Map を使いこなす
Google Map API にStreet View Objectsが追加
google map apiにマウスホイールイベントを追加
google map apiで住所検索
google mapでカスタムオーバーレイ
Google Map APIでコンテナサイズの変更
Google MapをThickBox上に表示する方法
Google Mapで中央よりずらしたポイントに配置

posted by ねこまんま at 17:40 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする