スポンサードリンク

Tag Archives: マーカー

地図をクリックして、マーカー(アイコン)を追加/全てのマーカー(アイコン)を一括で削除する方法

1.地図をクリックして、マーカー(アイコン)を追加する方法

ポイントは、次の通り

1-1.グローバル変数に、var markersArray = [];を指定

1-2.マップをクリックしたらマーカー追加のイベントを記述

google.maps.event.addListener(map, ‘click’, function(event)
{
marker = createMarker(event.latLng);
markersArray.push(marker);
});

関数function createMarker(latlng)へ渡す

 

2.全てのマーカー(アイコン)を一括で削除する方法

2-1.リセットボタンを設置

<div><a href=”#” onclick=”clearMap();return false;”>リセット</a>

2-2.関数clearMap() の設置/配列を空に

function clearMap()
{
for (var i = 0; i < markersArray.length; i++ )
{
markersArray[i].setMap(null);
}
markersArray = [];
}

Read more »

アイコンが表示されていないただの地図にアイコン(マーカー)を追加する方法

 

このデモマップに複数のマーカーを表示させることは出来ますか?・・とのコメントを頂きました。出来ます。基本的にもともとのソースは変更せずに、足りないソースを追加していきます。

 

1.アイコンの表示設定

地図にどんなアイコンを表示させましょうか。Google Mapの標準アイコンもあれば、自作アイコンなどもありますよね。ここでは、Googel Mapで使用されている標準アイコンを使うことにします。

表現のソースはコチラのページ ”マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する” の「サンプル4」にしましょう。

Read more »

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

メトロスタジオMetro Studio1は、アイコンのサンプルも少なく、自分で自由にGoogle Map用のアイコンが作れなかったのですが、Metro Studio2(いまなら無料)は、いいです。

 

手軽にGoogle Map用のアイコンに利用出来るメトロスタジオMetro Studio2(今なら無料)

 

 

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

手軽にアイコンを作成できるメトロスタジオMetro Studio 無料

メトロアイコンを手軽に作成できるMetro Studioが無料で配布されていました。

499ドルが現在無料です。

タイ バンコクの鉄道路線図(Bangkok Thailand Rail Line)作成に使ってみました。(記事

 

metrostudio

 

  Read more »

バンコク BTS,地下鉄地図-kmlファイルからデータを読み込んで地図にアイコン・マーカー及びレイヤーを表示させる

◆Googe Maps API V3の使い方/kmlファイルからアイコンやレイヤーを読み込んで表示させる方法

kmlファイルからのデータを読み込んでマーカーを表示させる仕方ですが、Google 先生のこのページを参照下さい。

kmlファイルさえ、作成してしまえば、アイコンを地図に好きなように表示できて便利。ポリラインやポリゴン等を地図上にお絵かきするのもとっても簡単。

今回は、タイ バンコクの鉄道の路線図を作成してみます。

  Read more »

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

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

plebeosaur.us “Here We Are Again”

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

 

icon icon

Read more »

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 »

1 / 3123

スポンサードリンク