Google Map Archive

Full Option version:
<script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fscrolling%3Dtrue%26url%3Dhttp://www.samurai-logic.com/gadget/ajax/map_gadget2.html&synd=open&w=420&h=450&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
Simple version:
<script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fscrolling%3Dtrue%26url%3Dhttp://www.samurai-logic.com/gadget/ajax/map_gadget2.html&synd=open&w=420&h=450&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

これらのコードの幅は、420px と設定されています。大きさはブログやサイトのスペースに応じて設定してください。（w=420 の部分を変更すればOKです。）
このガジェットはiframeで生成されています。グーグルでカスタマイズした場合は、IEでY軸のスクロールが出来なくなります。

Google Map ドラッグズーム機能 Drag Zoom Control

ドラッグズームコントロールを使用したサンプルコードです。前回と同じくイベントリスナーで、マウスが離れるとコントロールが表示されなくなります。

This sample code used Drag Zoom control with some options, added eventlisteners "onmouseove" and "onmouseout" that is same as last article.

    GMapDragZoom = new DragZoomControl(
       {border:"1px  solid #FFFF00"},
       {buttonStartingStyle: {background:"#F4F4F4", border:"1px solid black"},
        buttonStyle: {width:"100px", height:"50px"} ,backButtonEnabled:true},
       {}
    );

    map.addControl(GMapDragZoom,
                 new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(70,10)));

map.addControl(new DragZoomControl());

これは、簡単なコードです。

サンプルコードは、このDragZoomControlの部分にオプションを追加しています。new DragZoomControl の部分を GMapDragZoom 変数に代入しています。
Abobe is the most simple code. I added a couple of options in a sample code, using a variable "GMapDragZoom".

map.addControl(new DragZoomControl({}, {}, {}));

ドラッグズームのオプションは、DragZoomControl({} ,{} ,{}); の{}の中に書き込みます。最初の、{}には、ドラッグズームした時のエリアのスタイルを設定します。"border:1px solid #FFFF00" はドラッグするエリアのボーダーを 1px の黄色に設定しています（スタイルを"dot"や "dash"にしてみましたが、solidしか使えないようです）。　次の{}には、地図に表示されるコントロールのスタイルと ズームする前のポジションにバックする（backButtonEnabled ）を設定します。３番目の{}には、イベント系の設定が出来ます。

試してみるといろんな発見が出来ると思いますが、キリがないので実際に使ってみて便利なものをサンプルコードしました。

The options are writen in three brackets "{}, {}, {}". The first bracket is used when setting up the style of the dragging area. "border 1px solid #FFFF00" set the dragging area 1px solid yellow. (I tried to use the border style "dot" or "dash" but it's not effectieve as shown on map.) The second bracket sets a style of control on map, and "backButtonEnabled" that is shown on the map after you drag areas. The third bracket is used when sets up events.

"addMapType(G_PHYSICAL_MAP);"を追加しています。地図のマップタイプの一番右に表示されています。

Continue reading

Google Map source code sample ソースコードサンプル

イベントリスナーでマウスホイール機能を使用

マウスホイールでズームをしたいときは、↓を付け加えます

map.enableScrollWheelZoom();

このマップはチェックボックスにチェックを入れた場合のみズームできるようにしています。

このGoogle Mapはイベントリスナー(GEvent.addListener)を利用して、マウスが地図上から離れたらコントロールを表示しないようにしています。
"mouseover" でイベント処理（コントロールを表示する）をして、"mouseout"でコントロールを非表示にさせます。

GEvent.addListener(map,"mouseover",function(){ }

GEvent.addListener(map,"mouseout",function(){ }

また、右下に 'GOverviewMapControl' を利用して地図の全体を表示させています。
GSize(150,100)　で、幅150px 高さ100pxを指定しています。

これを指定しないとデフォルトの大きさ(100px, 100px)のコントロールが表示させます。

map.addControl(new GOverviewMapControl(new GSize(150,100)));

続き（ソースコード）↓

Continue reading

簡単なGoogle Map & ローカルサーチのソースコードです。

ローカル検索のスクリプトとスタイルはグーグルからインポートします。 下の場合は直接リンクで使っています。

<script src="http://www.google.co.jp/uds/api?hl=ja&file=uds.js&v=1.0" type="text/javascript">
<script src="http://www.google.co.jp/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript">
@import url("http://www.google.co.jp/uds/css/gsearch.css");
@import url("http://www.google.co.jp/uds/solutions/localsearch/gmlocalsearch.css");

YOUR CODEの部分をGoogle Map APIのページにサインアップして得たコードを書き入れます。

src="http://maps.google.co.jp/maps?hl=ja&file=api&v=2& key=YOUR CODE"

hl=ja　を　hl=en に変えると英語で表示されます。

Continue reading