電子書籍の厳選無料作品が豊富！

GoogleMapにカラーマーカーと吹き出し

解決済

  • 質問者：snowcandy8
  • 質問日時：
  • 回答数：4件

GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが
吹き出しを表示させる方法はなんとかなったのですが
現在のHTMLに上手くマーカーに色を設定できません。
現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。
http://www.royal-resort.co.jp/hakone/g_map/test_ …

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

A No3です。



たびたび失礼！
どこかで、googleのapi呼び出しが抜けてしまっていました。

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false' …

こちらも念のため。

って、何度もおまぬけなやつ ＞ 俺
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答、ありがとうございます。
バタバタしておりいただきましたコードをいれこんで動きをまだ見れておりませんが上記サイトに埋め込んで表示できるか試してみます。

通報する
お礼日時：2013/01/11 19:34

No.3

  • 回答者： fujillin
  • 回答日時：

A No2です



肝心のicon生成のアドレスのところがリンク表示のために省略されてしまってしまったみたいですが、先頭文字を除くと以下の通りとなります。
　ttp://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=" + i + "%7C" + e[2]

念のため。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

A No1です。



補足の参考URLに挙げていらっしゃる方法は、No1の2）の方法と同じ考えです。
表示方法はそのサイトにも書いてある通りですし、No1の参考に挙げた通りなのですが…


とりあえずの表示例として…
　*　マーカーは 1～の番号表示としていますが、生成アドレスの「" + i + "%7C"」の部分を「%E2%80%A2%7C"」に変えれば「・」表示で一定となりますので、デフォルトのアイコンとほぼ同じものの色違いになります。（番号の場合、1桁しか表示できません）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>

<body>
<div id='map' style='width:800px; height:600px;'></div>

<script type="text/javascript">
<!--
//　マーカーデータ（座標・色）
var markers = [
[35.68, 139.75, "ff8888"],
[35.70, 139.75, "88ff88"],
[35.66, 139.75, "8888ff"],
[35.68, 139.72, "ffff88"],
[35.68, 139.78, "88ffff"]
];

//地図を表示
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(markers[0][0], markers[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
});

//マーカーを表示
for(i=0; e=markers[i++];){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(e[0], e[1]),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pi … + i + "%7C" + e[2]
});
}
//-->
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

mapのapiを見てみると、デフォルトのマーカーの色をそのまま変えられそうなプロパティは見当たらないようですね。




考えられそうなのは、

1）普通にアイコン画像を複数用意しておいて、それで表示する
　https://developers.google.com/maps/documentation …

2）考え方は1）と同様ですが、画像は用意せずに生成して表示する
　chartのDynamic Iconsを利用すれば、デフォルトとほぼ同じアイコンを色指定して作成できます
　https://developers.google.com/chart/image/docs/g …

ほかにも方法はあると思いますが、とりあえず。
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん

ご回答、ありがとうございます。

吹き出しを入れずマーカーの色のみを簡単に帰る方法が掲載されているところはあるのですが、
http://99blues.dyndns.org/blog/2011/06/google-ma …
出来ればアイコン画像を使わず上記URLの方法を取り入れられないかと思っております。
初級者なのでコードを書いていただけますと助かりま。
引き続き皆さまよろしくお願いいたします。

通報する
お礼日時：2013/01/10 09:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報