スポンサードリンク

Tag Archives: Google Maps API v3

Google Maps API v3 + 外部XMLファイル + サイドバー(sidebar)の復習

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる」の記事が良くわからないとのコメントを頂いたので再度ポイントを復習してみます。

 

 

この地図は、外部に用意したxmlファイルからデータを引っ張ってアイコンを表示させるもの。ただし、xmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php」は、MySQL+phpで作成しているのでデータベースを利用していない場合には、テキストエディタで作成すれば良し。gmarker.xmlというファイル名にしてあります。サンプルは、コチラ「xmlファイルサンプル」。

②続いてdownloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。downloadxml.jsをダウンロードしてご自分のサーバにアップ

③最後に上記①のxmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml」をご自分のPCに保存後、自分のサーバにアップロード。その後、下記の赤字の部分だけを自分のサーバURLに書き換えればOKです。これで動くはずですが・・・・。

Read more »

アイコン一覧

2014/04更新:

Google Maps API V3; schedule of Icons for markers

グーグルマップ用のアイコンを探して増やしました。 Google Maps API グーグルマップで必要になるのがアイコンのサンプル。

Google Map アイコン一覧表にまとめてみました。影付きも用意。

マウスの右クリックで、URLをコピペしてダウンロード保存してください。

blue-dot.png green-dot.png ltblue-dot.png red-dot.png yellow-dot.png purple-dot.png pink-dot.png orange-dot.png
blue.png green.png lightblue.png red.png yellow.png purple.png pink.png orange.png
msmarker.shadow.png マーカー。アイコン用影
blue-pushpin.png grn-pushpin.png ltblu-pushpin.png red-pushpin.png ylw-pushpin.png purple-pushpin.png pink-pushpin.png
pushpin_shadow.png プッシュピン用影
bar.png coffeehouse.png restaurant.png snack_bar.png drinking_water.png lodging.png wheel_chair_accessible.png man.png woman.png
bar.png coffeehouse.png restaurant.png snack_bar.png drinking_water.png lodging.png wheel_chair_accessible.png man.shadow.png woman.shadow.png
movies.png convienancestore.png grocerystore.png homegardenbusiness.png parkinglot.png gas.png mechanic.png shopping.png yen.png ydollar.png euro.png
movies.png convienancestore.png grocerystore.shadow.png homegardenbusiness.png parkinglot.png gas.png mechanic.png shopping.png yen.shadow.png doller.shadow.png euro.shadow.png
cabs.png bus.png rail.png plane.png ferry.png truck.png helicopter.png harts.png electronics.png pharmacy-us.png alon.png
cabs.png bus.png rail.png plane.png ferry.png truck.png helicopter.png arts.shadow.png lectronics.shadow.png pharmacy-us.shadow.png salon.shadow.png
campground.png rangerstation.png tree.png toilets.png picnic.png hiker.png cycling.png motorcycling.png horsebackriding.png sportvenue.png golfer.png golfer.png
campground.png rangerstation.png tree.png toilets.png picnic.png hiker.png cycling.png motorcycling.png horsebackriding.png sportvenue.png golfer.png golfer.png
swimming.png webcam.png question.png info.png flag.png water.png snowflake_simple.png marina.png fishing.png sailing.png waterfall.png info_circle.png
swimming.png webcam.png question.png info.png flag.png water.png snowflake_simple.png marina.png fishing.png sailing.png sailing.png sailing.png
rainy.png ski.png
rainy.shadow.png ski.shadow.png
cabs.png bus.png rail.png plane.png ferry.png subway.png tram.png truck.png helicopter.png postoffice-us.png police.png
cabs.shadow.png bus.shadow.png rail.shadow.png plane.shadow.png ferry.shadow.png subway.shadow.png tram.shadow.png truck.shadow.png helicopter.shadow.png postoffice-us.png police.png
hotsprings.png firedept.png postoffice-jp.png phone.png phone.png phone.png phone.png phone.png phone.png phone.png
hotsprings.png firedept.png postoffice-jp.png phone.shadow.png phone.shadow.png phone.shadow.png phone.shadow.png phone.shadow.png phone.shadow.png phone.shadow.png
camera.png webcam.png hotsprings.png
camera.shadow.png webcam.shadow.png hotsprings.shadow.png
sunny.png partly_cloudy.png police.png postoffice-us.png volcano.png
sunny.shadow.png partly_cloudy.shadow.png police.shadow.png postoffice-us.shadow.png volcano.shadow.png
mm_20_red.png mm_20_blue.png mm_20_green.png mm_20_orange.png mm_20_purple.png mm_20_yellow.png mm_20_gray.png mm_20_black.png mm_20_white.png
mm_20_shadow.png ミニマーカー。アイコン用影
arrowSmall80.png
arrowshadowSmall80.png 矢印用影

 

◆グーグルアースやその他で使用されているアイコン一覧 

               
   
           
     

 

           
   
           
 

 

◆世界地図に便利な国別の国旗アイコン

ISO国コードによる国・地域別のSVGアイコン、PNGアイコンがダウンロードできます。 ページの後半に「You can download pre built PNG icon sets from my Dropbox.」とあり、そこからzipファイルでまとめて国旗をダウンロードできます。国旗アイコンのサイズも様々に揃ってます。

https://github.com/koppi/iso-country-flags-svg-collection

National flag

 

◆手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2

Metro Studio2(いまなら無料)は、いいです。かなり自由に自分好みのグーグルマップ用に使えそうなアイコンを作成できます。地図のアイコンに統一感がでてきますし、大きさ、カラーも変えられます。アスファベットアイコン、数字アイコン、漢字アイコン等も自由で、Googleマップに使えそうなご希望のアイコンが大抵揃いそうです。ただし、アイコンは「まる」か「四角」のみ。(詳しくは、コチラ

 

 
 

 

◆map icons collection カラフルサンプルアイコン

サンプルもカラフルで種類が豊富です。旧Google Codeから新しいサイトへ移動しました。さらにパワーアップ。

ここには特殊文字のアイコンもあります。

 

◆矢印、アルファベットアイコン

 

◆現在地アイコン

Google Map current indicator icon

◆影付きのカスタムアイコン(マーカー)を作成できるサイト

自分のPC内のpng、画像ファイルでカスタムアイコンを作りたければここを試されてはどうでしょうか。

◆Google Maps JavaScript API V3

Google Map現在地アイコン/レーダのようにパルス発信するアニメーション

iPhone(スマートフォン用端末)のGoogle Map アプリのような現在地アイコンがいいな~なんて探していたら有りました。

plebeosaur.us “Here We Are Again”

青いドットのアイコンで周囲にレーダーのように青いリングが広がっていくアニメーション付きです。

 

icon icon

Read more »

Google Mapデモ

◆Google Maps JavaScript API V3 Example(Demo)一覧

 

※本ページのiPhone(スマートフォン端末)用デモを見るには、ブラウザはGoogle Chromeを使用して下さい。

 

iPhone用

本ページのデモを見るには、ブラウザはGoogle Chromeを使用して下さい。

 

iPhone(アイフォン)やスマートフォンで、google mapを表示させたければ、jQtouchが手軽そうです。

 

◆jQtouch + Google Mapの作り方(方法)

しばらくiPhone(アイフォン)用のサイトをいじっていなかったので、見直しを兼ねて復習。

jQtouchライブラリも若干変更が出ているようですので、この機会に作りなおすことに。いずれにしても基本となるのは、jqtouchライブラリ

  Read more »

Google Map使い方

◆Google Maps JavaScript API V3 ブログ目次

Google Maps API v3とは? 本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。

※V2は、2013年11月以降は使用できなくなります。

 

いきなりサンプル集(example)地図を見るならコチラ

 

Google Street View(ストリートビュー)のConnecting MapにMarkerを表示させるサンプルデモ(Demo)

コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。

MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル(マップコネクト)を掛け合わせて少し調整して完成。

  Read more »

目的地アイコン(マーカー)をクリックして、ルート検索結果と距離を表示させる方法の続き

この記事でご要求をいただいたので、記事を付けたし。

 

余計なソースを削除して、最低限のソースだけにしたサンプル地図

目的地アイコン(マーカー)をクリックして、ルート検索結果と距離を表示させるデモ

Read more »

目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリライン(Polylines)と距離を表示させる方法/ルート検索API(Direction API)

 ◆Google Maps API V3  目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリライン(Polylines)と距離を表示

DirectionsRendererオプションの3つの使い方(マーカ削除ルートポリライン削除インフォウィンドウの非表示)を覚えたところで、目的の地図を作成していきます。

<地図構成>

地図に複数のアイコン(マーカー)を読み込ませておき、それぞれのマーカーをクリックしたら、模擬でセットした現在地アイコンからのルートと距離を表示させます。

1.不要な緑色のディレクションアイコンを消す。

2.現在地を模擬でセット

3.アイコンをクリックしたらルート検索を行う。

4.距離変数を取り出してインフォウィンドウに表示させる

ってなところでしょうか。

Read more »

WordPressの記事内にGoogle MapやストリートビューをGoogle Maps API V3で表示させる方法(php+MySQl+XML)

◆ Google Maps API v3  / WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させる方法。

WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させようとしてスムースに行かなかったのでメモ。 記事内にGoogle Mapやストリートビュー(streetview)を表示させるための方法ですが、ポイントは次の通り。様々なやりかたがあると思いますが参考までに。 Read more »

1 / 512345

スポンサードリンク