FC2ブログ

スポンサーサイト

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

地図の色を変えたGoogleMAPにディレクションモードを表示する


GoogleMAPSV3で地図の色を変更してディレクションモードを追加する


前回作成したGoogle MAPS API V3の地図の色(MAP STYLE)をオリジナルにしたもの
にDirection Modeを追加して、ナビゲートできるようにします。

dire.jpg



まず、head内にgooglen mapsを呼び出すスクリプトを張ります

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>


そして</body>の直前に

<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
           //まずこの2文を入れる
var MY_MAPTYPE_ID = 'original'//なんでもいいので名前をつける
var map;
var centerPos = new google.maps.LatLng(緯度,経度);
        //地図の中心位置を決めて変数centerPosに格納
function initialize() { // mapの初期化

var stylez = [ //前回作ったstyleのJSON
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: &quiot;road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
];
directionsDisplay = new google.maps.DirectionsRenderer();//ナビゲートを画面表示する
var mapOptions = {
zoom: 13,
center: centerPos,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]},
mapTypeId: MY_MAPTYPE_ID
};
  //map optionで地図の中心位置と、初期の拡大率、地図の種類(satellyteとかroadmapとか)
  // をいれる。カスタムマーカーなどを入れるならここに入れる。



map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
//マップを表示するDIVのID ここではmap_canvas
var styledMapOptions = {
name: "Ori"
}; //mapのStyleに名前をつけとく

var Original = new google.maps.StyledMapType(
stylez, styledMapOptions); //地図名前にmapstyleを結合させる

map.mapTypes.set('original', Original);
map.setMapTypeId('original');
directionsDisplay.setMap(map); //ナビゲーションをmapに表示する
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
};//directionpanelというIDのDIVに、ナビゲーション詳細を表示する
};
function calcRoute() { //ルート処理

 var start = document.getElementById("start").value;
//出発点のvalueを取得、ここではstartというselectに設定
var end = document.getElementById("end").value;
//到着点のvalueを取得、ここではendというselectに設定
var request = {
origin:start, //ルート計算開始位置
destination:end, //ルート計算終了位置
travelMode: google.maps.DirectionsTravelMode.WALKING
};
         //ルートの方法 WALKING DRIVING,BICYCLINGの中から選ぶ
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); document.getElementById("access").style.display = "none";
}
}); //エラー処理
};
</script>


HTMLはセレクトとオプションを使って、
出発点と到着点を選択してもらい、
map_canvasに地図を表示
directionPanelにナビゲート詳細を表示します。

まず忘れずにこれを入れて
<body onload=&quit;initialize()">


以下タグの打ち方
<div>
<b>出発地</b>
<select id="start" name="start" onchange="calcRoute();">
<option value="品川駅">品川駅</option>
<option value="国際展示場駅">国際展示場駅</option>
<option value="お台場海浜公園">お台場海浜公園</option>
</select>
<input type="hidden" name="AHidden" id="AHidden" value="">
<b>目的地</b>
<select id="end" name="end" onchange="calcRoute();">
<option value="台場公園">台場公園</option>
<option value="芝浦埠頭">芝浦埠</option>
<option value="東京都中央区晴海5丁目9-34">晴海埠頭公園</option>
</select>
</div>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
<div id="directionsPanel" style="width:200px; height:50px;"></div>

最初のgoogleMAPの呼び出しで言語を&language=jaにしていれば、
ディレクションモードのvalueは、日本語で地名を表記または住所を表記するだけで、
自動的に緯度経度が近い場所を選択してくれて、ルート表示されます。

サンプルページはこちら→http://www.geocities.jp/coliraxa/map1.html



残念なことに、direction rendererには 
線の色を変えるとかそういう機能はまだついてない模様です。
forumにリクエストも出てるので、そのうちoptionがつくかもしれませんね。

それでもどうしても線の色をカスタマイズしたい場合は、また次回!
スポンサーサイト

テーマ : Webサービス
ジャンル : コンピュータ

GOOGLE MAPS API V3の地図の色をカスタマイズ


GOOGLE MAPS API V3で、mapstyleを変えて、
       地図の色をカスタマイズ




GOOGLE MAPS API V3の特徴の一つに、
地図の色をオリジナルに変えられるカスタマイズ機能があります。
非常に簡単なので、やってみましょう。

まずGOOGLEが用意しているウィザードがあるので、そこに行きます。
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html


map3.jpg



このような画面が出ます。
横のサムネイル画像を拡大して見える、赤い枠の中に注目!
GOOGLEのMap Styleはフォトショップのレイヤーのように、
カスタマイズしたい要素に対して一つ一つ設定を重ねます。





Feature Typeでカスタマイズする要素を選択
上からAdministrativeが行政区分 国境・県境などの色を変更したり
非表示にするならstyleを加えます。
Landscapeは人工物か、自然の風景か。
PointofInterestは、お店、銀行などの建物
Roadは、高速道路、幹線道路、一般道路を塗りわけられます。
Transitで駅と線路、Waterが川・湖・海の色です。

赤枠のFeatureTypeの隣にあるElementTypeで、
全ての要素か(All)/地理的な要素の表示を変えるか(Geometry)/その名前の表示を変えるか(Label)
選びます。


下のStylerで、表示・非表示(visibility)と
色相(fue)/明度反転(invert_lightness)/彩度(saturation)/明度(lightness)/透過度(gamma)
を変更します。


設定できたら、ElementTypeの下にあるAddStyleボタンを押します。
すると、右側のMapStyleに追加されます。


この手順を、MAPの変えたい要素ごとに繰り返して、
最後にShowJSONボタンを押します


map4.jpg
(MAPSTYLEカスタマイズ設定した例)→サンプルページへ

するとこのようなJSONが表示されます。


[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: "road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
]


ここまできたら、HTMLにもどって、
head内にまず、GOOGLE MAPS API V3を呼び出すコードをいれ


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>


それから次のスクリプトをhead内に入れます。



<script type="text/javascript">
//![CDATA[
var map;
var centePost = new google.maps.LatLng(緯度,経度);//表示させる地図の中心
function initialize() {
var stylez =
[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: "road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
];//作成したMapStyleを変数に格納
var mapOptions = {
zoom: 11,//地図の最初に表示される時の拡大率設定
center: centePost,//さっき設定した中心
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'original']//maptypeに名前を入れる
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);//ここではmap_canvasというIDのDIVに表示する設定です

var styledMapOptions = {
name: "customStyle"//マップスタイル設定の名前を設定する
}

var originalStyle = new google.maps.StyledMapType(
stylez, styledMapOptions);//JSONの設定とマップスタイルを組み合わせたものを変数に格納

map.mapTypes.set('original', originalStyle);//地図とスタイルを組み合わせる
map.setMapTypeId('original');
}

//]]
</script>


これで終了。

あとは、<body onload="initialize()">と、
ボディにオンロードイベントをつけます

テストページは こちらを参照のこと

いろいろな地図の色のカスタマイズは
http://www.41latitude.com/post/1268734799/google-styled-maps
こちらにたくさん出ているので、参考にどうぞ



テーマ : Webサービス
ジャンル : コンピュータ

GOOGLE MAP API V3の影SHADOWの透過率の問題


GOOGLE MAPS API のINFO boxや、カスタムマーカーを作った際の影が透過しない問題について


XPユーザーの方は、UAエージェントの取得ミスが発生するので、ビデオドライバをアップデートしてください。
とGOOGLEMAPSのFORUMに書いてあったけど、
私の問題は違ったw


前回作ったカスタムマーカーのシャドウは、
PING形式で保存(PING32)にしたけど
肝心の画像の透過率をさげてなかった。
シャドウメーカーで影を作った人は、書き出しの時に透過率を17~20%にしましょう。

これで解決です。

インフォボックスの影の透過率の問題は、
IEのみに起こる現象のようで(またか・・)
ユーザーエージェントで正しくIEのヴァージョンがGOOGLEMAPSの方に伝わらず、
透過率が-moz opacityで上書きされてしまって、変になるそうです。
画像の取得更新するか、なんかすれば直るみたいなことが書いてありました。

じき3.1にバージョンUPするそうなので、修正待ちかな。



テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

google maps API V3 のディレクションモード(direction mode)



GOOGLE MAPS API V3 のディレクションモードを使ってみた。
(direction mode WALKING)



V2ではドライブモードしかなくて、最寄駅から徒歩でのルートを描けなかったので、入れてなかったけれど、
ついに徒歩モードが出たので、早速!!(正式な名前は、DirectionTravelMode クラスのWALKING)

詳しい説明はこちらのサイト(英文)
http://stiern.com/tutorials/how-to-use-directions-with-google-maps-api-v3




function calcRoute() {
var aaa = new google.maps.LatLng(緯度,経度);
var eki = [緯度, 経度];
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
document.getElementById("access").style.display = "none";
}
});


HTMLのタグは


<div>
<p>出発地</p>
 <select id="start" name="start" onchange="calcRoute();">

<option value="出発地1">出発地1</option>
<option value="出発地2">出発地2</option>
<option value="出発地3">出発地3</option>
</select>

<p>目的地</p>
  <select id="end" name="start" onchange="calcRoute();">

<option value="目的地1">目的地1</option>
<option value="目的地2">目的地2</option>
<option value="目的地3">目的地3</option>
</select>

</div>
>div id="map_canvas" style="width: 700px;height: 450px;"></div>
<div id="directionsPanel" style="width:200px; height:50px;"></div>


使ってみた感想
なかなか便利!
でも、ルートの詳細のところに大きく、ベータ版なので、歩道じゃないところも表示される可能性が・・・うんぬんの注意がちょっと目立つ
あと、IE、firefox、chromeでは、ルートの詳細が日本語表記なのに、SAFARIだけ何故か英語になってしまう・・・
言語表記選択のオプションってどこにあるんだろう・・・また調べなくては
と思ったら、リファレンスにのってた

headのスクリプト文に&language=jaと足せばいいんだそうです。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja">


ついでに、ウオーキングモードなどの探索をおこなうと、せっかく前回つくったカスタムマーカーと

到着のマーカーがかぶってしまって、見えなくなっていたので、marker optionのなかに、

zIndex:10000を入れることにしました。


var marker = new google.maps.Marker({
position: myLoc,
map: map,
shadow: myshadow,
icon: myimage,
shape: shape,
zIndex:10000
});


しかし相変わらず、ブラウザによって影シャドウの透過率がまちまち

サンプルページは direction mode だけのページ 

Custom MarkerとInfo Windowとdirectionmode のサンプル

で見てください

テーマ : インターネット関連
ジャンル : コンピュータ

GOOGLE MAP API のV3を試す


google MAPS API V3 でカスタムマーカー&シャドウを表示


知らない間に、GoogleのMap APIバージョンUPしてた!

google map API のページはこちら↓
http://code.google.com/intl/ja/apis/maps/

詳しい説明は、MAPS API V3 サービスのページでどうぞ。
http://sites.google.com/site/gmapsapi3/Home/services

さっそく導入してみたわけですが・・・なんかjqueryUI

プログラムが動かなくなりました

まあいつもの展開><

jquery版のgoogle MAPS API V3のミニマム版もネットで結構でていて

新しくなったGoogle Maps API V3をjQueryと一緒に利用する


など、ためしに導入してみたりしたのですが、V3の徒歩バージョンのディレクションモードや、

カスタムマーカーをぜひ使いたくて、そうなるとなかなかjquery版でAPIのV3のフル機能を使えるものは

そうそうなく、とりあえず、jqueryをひっぺがして、あとでそこは考えることに
とりあえず、カスタムマーカーを作って、地図に表示してみる

まずheadの中にgoogle maps APIをロードしてもらう文を入れる

V3になってAPIキーが不要になったので、非常に便利に



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

sensorはGPS機能がついてるかどうかなので、PCのホームページを作ってるからfalseに。


HTMLのほうは地図を表示させるmap_canvasというidのdivを用意。



<body onload="initialize()">
<div id="map_canvas" style="width: 700px;height: 450px;"></div>
</body>

initialize()の中身は




<script type="text/javascript">
//![CDATA[
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();

var centerPos = new google.maps.LatLng(緯度,経度);
  //地図の中心の緯度と経度
var mapOptions = {
zoom : 15,
center : centerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : true,
scaleControl : true,
navigationControl : true


};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

setMarkers(map, aaa);
var myMap = new setMarkers(map,aaa);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  //グーグルマップをmap_canvasというidのdivに展開する

setMarkers(map, aaa);
  //マーカー初期化

var myMap = new setMarkers(map,aaa);

var aaa = ['マーカーのタイトル', 緯度,経度 ,ズームの倍率];

  //複数マーカーを置く場合は

[['タイトル',緯度,経度,倍率],['タイトル',緯度,経度,倍率]]
のようにする


function setMarkers(map, locations) {
var myimage = new google.maps.MarkerImage('マーカーのイメージファイルurl',

new google.maps.Size(40, 60),
  //マーカーの幅と高さのピクセル
new google.maps.Point(0,0),  ///マーカーイメージの開始位置
new google.maps.Point(20, 30)
  // (幅/2, 高さ)
);

);
var myshadow = new google.maps.MarkerImage('マーカーの影のファイルurl',
  //マーカーの影をつける場合
new.maps.Size(71, 60),//影の幅と高さ
new google.maps.Point(0,0),  ///マーカーイメージの開始位置
new google.maps.Point(20, 30)
  // (幅/2, 高さ)
);

);
var shape = {
coord: [1, 1, 1, 60, 40, 60, 40 , 1],
type: 'poly'};
//クリックしてインフォウインドウが開くための位置

for (var i = 0; i < locations.length; i++) {
var aaa = locations[i];
//マーカーを配列に入れる
var myLoc = new google.maps.LatLng(aaa[1], aaa[2]);   //

var marker = new google.maps.Marker({
position: myLoc,
map: map,
shadow: myshadow,
icon: myimage,
shape: shape
});
var infowindow = new google.maps.InfoWindow({
content: 'インフォウインドウの内容',
size: new google.maps.Size(200, 60)
//インフォウインドウの幅・高さ
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
};

};




なんか、インフォウインドウのサイズの設定が、あまりきいてないという噂で、試してみると本当にサイズを変えても
何にも変わりません



カスタムマーカーにつけるシャドウは、シャドウメーカーで作るのが便利!
http://www.cycloloco.com/shadowmaker/shadowmaker.htm?


ここでカスタムマーカーにぴったりなシャドウを作ると、google Maps APIにマーカーとシャドウをつけるスクリプトを表示してくれるので、その数値を上記の位置決めのところに代入すれば簡単!!


ただ問題点は・・・シャドウが透過していない;;
この問題はまだ未解決・・・



   ※この問題は後日解決しました
解決法の記事へ


map2.jpg



できあがりはこんな感じに。



ちなみにgoogle Maps API V3は、まだまだバグが多いみたいで、
Windows7のIE8で見てみたら、カスタムマーカーのシャドウは透過していたのに、
インフォウインドウのシャドウが透過してなかった・・


次回はgoogle maps API V3の徒歩バージョン
のナビゲーションを試すの巻!!!!


テーマ : 役立つツール
ジャンル : コンピュータ

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。