GoogleMapにそれぞれのポイントに色んな色のカラーマーカーと吹き出しをいれたいのですが
吹き出しを表示させる方法はなんとかなったのですが
現在のHTMLに上手くマーカーに色を設定できません。
現在のmapが下記URLになります。こちらのどこに書き込めば反映されるのかどうかご教授よろしくお願いいたします。
http://www.royal-resort.co.jp/hakone/g_map/test_ …
No.4ベストアンサー
- 回答日時:
A No3です。
たびたび失礼!
どこかで、googleのapi呼び出しが抜けてしまっていました。
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false' …
こちらも念のため。
って、何度もおまぬけなやつ > 俺
ご回答、ありがとうございます。
バタバタしておりいただきましたコードをいれこんで動きをまだ見れておりませんが上記サイトに埋め込んで表示できるか試してみます。
No.3
- 回答日時:
A No2です
肝心のicon生成のアドレスのところがリンク表示のために省略されてしまってしまったみたいですが、先頭文字を除くと以下の通りとなります。
ttp://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=" + i + "%7C" + e[2]
念のため。
No.2
- 回答日時:
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>
No.1
- 回答日時:
mapのapiを見てみると、デフォルトのマーカーの色をそのまま変えられそうなプロパティは見当たらないようですね。
考えられそうなのは、
1)普通にアイコン画像を複数用意しておいて、それで表示する
https://developers.google.com/maps/documentation …
2)考え方は1)と同様ですが、画像は用意せずに生成して表示する
chartのDynamic Iconsを利用すれば、デフォルトとほぼ同じアイコンを色指定して作成できます
https://developers.google.com/chart/image/docs/g …
ほかにも方法はあると思いますが、とりあえず。
fujillinさん
ご回答、ありがとうございます。
吹き出しを入れずマーカーの色のみを簡単に帰る方法が掲載されているところはあるのですが、
http://99blues.dyndns.org/blog/2011/06/google-ma …
出来ればアイコン画像を使わず上記URLの方法を取り入れられないかと思っております。
初級者なのでコードを書いていただけますと助かりま。
引き続き皆さまよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- Google Maps Google map 3 2022/09/17 21:11
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- Word(ワード) Wordの機能について教えてください。 2 2023/07/12 15:08
- その他(クラウドサービス・オンラインストレージ) ドライブレコーダーとGoogleMapが同期しなくなった 1 2022/06/02 22:00
- その他(プログラミング・Web制作) pythonのmap、結果の利用は1度だけ? 5 2022/06/11 12:33
- Chrome(クローム) Chromeでgooglemap検索等結果が他国になってしまう 1 2022/10/05 12:18
- Google Maps iOS でのgoogle map の地図を写真で表示する方法を教えて下さい。 Windows でgo 2 2023/06/02 09:56
- その他(悩み相談・人生相談) マーカーとペンの使用している数について 僕は現在、勉強において ・ペン 重要なところ⇒オレンジ色 語 2 2022/06/08 23:17
- Google Maps google map経路検索で、進行方向とmapの向きを一致させたい 3 2022/04/10 14:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLファイルのインクルードで...
-
body内にmetaタグを記述は問題...
-
POSTしたデータの文字コードがu...
-
Aタグのmailtoでメッセージ作成...
-
HTMLソースにない文字がブラウ...
-
COLDFUSIONの文字化け
-
refreshタグ 自動的にジャンプ...
-
safariだけcssが反映されない
-
斜線を引くのは無理ですね?
-
css ,videotタグ。ホームページ...
-
meta name="robots" content="i...
-
文字化けを故意に表示したい
-
pythonのプログラムを走らせる...
-
<title></title>はどこに書くべ...
-
わざと文字化けさせるには
-
WEBページがIEだけ文字化けして...
-
GoogleMapにカラーマーカーと吹...
-
borderでa:hover下線表示させる...
-
HTMLからフォルダを開きたい
-
Excelで、社外秘(閲覧のみ)と...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
body内にmetaタグを記述は問題...
-
根号の書き方について
-
文字化けを故意に表示したい
-
HTMLファイルのインクルードで...
-
先日ウェブデザイン技能検定三...
-
iframe内の表示を常に最新にしたい
-
borderでa:hover下線表示させる...
-
指定した演算を実施の結果を表...
-
ページ全体を中央に配置したい...
-
safariだけcssが反映されない
-
わざと文字化けさせるには
-
WEBページがIEだけ文字化けして...
-
html で 変数を定義できますか?
-
<!DOCTYPE html>あってますか?...
-
COLDFUSIONの文字化け
-
textareaの一行の文字数制御
-
Duolingo のソースコードの名前...
-
Aタグのmailtoでメッセージ作成...
おすすめ情報