FC2ブログ

スポンサーサイト

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

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。