スポンサードリンク

Tag Archives: Google Maps API

アイコン一覧

Posted by 管理人 on 2012年8月5日 8 comments | 189,916 views

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 Maps API V3

Posted by 管理人 on 2012年4月16日 None comments | 3,639 views

◆Googe Maps API V3の使い方／地図にお天気アイコンと雲レイヤーを表示させる方法

グーグルマップにお天気情報と雲の状況を表示できるようになっています。

日本語版Google Maps JavaScript API V3 デベロッパーのオーバーレイのページには、アナウンスがないのですが、英語版のデベロッパーページには、「ウェザーレイヤー（WeatherLayer）」について記述があります。

ここでは、2012年4月のGoogle Geo Developers Blogで紹介されているサンプルをベースにお勉強。

 

◆The Weather and Cloud Layers (Library)

デベロッパーガイドでは、The Weather and Cloud Layers はLibrary（ライブラリー）と書いてあります。Libraryとは？

ライブラリーの概要については、ここのページに記載があります。

要は、地図APIのいくつかの機能を使いたければ、指定しないと使えないよ・・・とのこと。ここでは、このサンプル地図に天気と雲のレイヤーを追加してみたいと思います。

  Read more »

影付きのカスタムアイコン（マーカー）を作成できるサイト／Google Map Custom Marker Maker

Posted by 管理人 on 2011年2月1日 None comments | 6,857 views


◆ Google Maps API v3 /影付きのカスタムアイコン（マーカー）を作成できるサイト

この「Google Map Custom Marker Maker」 と言うサイト。結構重宝。

以前、同様なカスタムアイコン（マーカー）用の影を簡単に作成できるGoogle Maps API Icon Shadowmaker for Google Maps v3を紹介したが、本日アクセスできなかったので、他のサイトを探していて発見。

自分のPCにあるPNG、GIFファイルからgoogleマップ用のカスタムアイコンを容易に製作できますのでお試しあれ。

Read more »

マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する／Google Maps API V3 （new google.maps.Marker / new google.maps.MarkerImage)

Posted by 管理人 on 2011年2月1日 None comments | 39,009 views

◆ Google Maps API v3 マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する

V3グーグルマップのアイコン（マーカー）の種類を変更するには、いくつかのscriptの書き方があるようです。

まあ用途で使い分ければいいと思いますが・・・・

＜サンプル1＞

もっとも良く見かける基本のscriptです。単一のマーカー用のイメージ画像とシャドウ（影）を指定しています。

var icon = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var shadow = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var marker = new google.maps.Marker(
{
draggable: true,
raiseOnDrag: false,
icon: icon,
shadow: shadow,
//shape: shape,
map: map,
position: point
});

Read more »

カスタムアイコン（マーカー）用の影を簡単に作成できるGoogle Maps API Icon Shadowmaker for Google Maps v3

Posted by 管理人 on 2010年10月13日 None comments | 2,888 views

Google Mapsの標準アイコン（マーカー）にないアイコンを使いたい場合、影をどうするか悩んでいたら、何とまあ、便利なものが・・・・for Google Maps v3とありますが、v2で問題なく影付きのマーカーが作成できました。

便利なのでお試しを・・・これで、いろんなアイコンを地図に表示できるようになりますので、マーカーの種類が増えてしまいそうです。

Read more »

Google Maps が表示されないトラブル発生。

Posted by 管理人 on 2010年8月17日 None comments | 1,373 views

帰宅し、ブログ更新でもと思いふと見るとGoogle Mapsが表示されていない？

何故？　あわてて他の自分のブログを見るが同様に表示されない状況。

Google Maps が何故表示されないか不明だが、自分以外のGoogle Maps を採用しているブログも地図が表示されていない。大手サイトも同様。世界中でGoogle Maps サーバの異常か？

2009年にも同様のトラブルがあったようです。

さて、いつ復旧されるのか？　Google Mapsが無けりゃ役にたたないサイトも多いのではないでしょうか。当たり前のように自由に地図をGoogle さんに使わせていただいていますが、このような事態になるとGoogleの重要性を再認識。

久しぶりにブログを更新しようと思いましたが・・・・本日も休憩。

・・・・・翌日正常になっていました。

Google Maps APIの全画面表示スタイルシート　フルスクリーン高さ100％の指定

Posted by 管理人 on 2010年7月18日 None comments | 5,026 views

Google Maps APIで地図の高さを100%にして、フルスクリーンにする方法

日本語サイトには、説明の良いサイトが無かったので、海外サイトを見ていたらありました。（感謝！）

地図左上に”Show Highlighted Code”があるのでクリック。HTM記述がハイライト表示でわかりやすく記述されています。

Read more »

phpMyAdmin で MySQL のデータテーブルから指定選択した変数のマーカー（アイコン）だけを表示させる／PHP, MySQL & Google Maps

Posted by 管理人 on 2010年6月18日 2 comments | 2,325 views

MySQLのデータテーブルから全ての行を選択して表示させるためのｐｈｐファイルに記述する（全てのマーカー表示）、select文は、

次の通り（参考記事）

$query = “SELECT * FROM markers WHERE 1″;

今回は、特定のマーカーだけを、抽出選択して地図に表示させてみる。

Read more »

矢印アイコン、アルファベットアイコン、（影付き）

Posted by 管理人 on 2010年5月26日 None comments | 11,474 views

Fatal error: Call to undefined function is_post_publicly_viewable() in /home/users/0/main.jp-waox/web/news/wp-includes/media.php on line 1025