# 地図にピンを表示するの応用編を教えて下さい。 **URL:** \ **Category:** kintone 開発相談\ **Created:** [2015 年 12 月 8 日午前 8:55 UTC](https://community.cybozu.dev/t/topic/2311 "2015-12-08T08:55:47Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Legacy\_Account156](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@Legacy\_Account156](https://community.cybozu.dev/u/Legacy_Account156)\ **Post date:** [2015 年 12 月 8 日午前 8:55 UTC](https://community.cybozu.dev/t/topic/2311/1 "2015-12-08T08:55:47Z")
公開されている 「地図にピンを表示する」でJavaScriptを読み込みました。 ピンを取引会社ごとに色分けすることはできますでしょうか。 宜しくお願い致します。 ---
**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\ **Post date:** [2015 年 12 月 8 日午前 11:48 UTC](https://community.cybozu.dev/t/topic/2311/2 "2015-12-08T11:48:37Z")
できます。 ピンの色をかえる、など地図の機能はGoogleMapのAPIの話になります。条件に応じて、Marker作成時に任意のiconオプションを追加してください。 下記は例です。緑色のピンが立ちます `var` `marker = ``new` `google.maps.Marker({`     position: point, ` ``map: map_address,` ` icon: 'https://maps.google.co.jp/mapfiles/ms/icons/green-dot.png',` ` ``title: address` `});` 参考：[https://www.softel.co.jp/blogs/tech/archives/4726](https://www.softel.co.jp/blogs/tech/archives/4726) ---
**Author:** ![Legacy\_Account156](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@Legacy\_Account156](https://community.cybozu.dev/u/Legacy_Account156)\ **Post date:** [2015 年 12 月 9 日午前 12:44 UTC](https://community.cybozu.dev/t/topic/2311/3 "2015-12-09T00:44:39Z")
村濱一樹様 ありがとうございます。 緑のピンを立てることができました。 初歩的な質問かもしれないのですが、 一覧に表示されている地図のピンにも同じよう色づけする場合はどのような 操作が必要になりますでしょうか。 ---
**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\ **Post date:** [2015 年 12 月 9 日午前 4:44 UTC](https://community.cybozu.dev/t/topic/2311/4 "2015-12-09T04:44:24Z")
\> 一覧に表示されている地図のピンにも同じよう色づけする場合はどのような 操作が必要になりますでしょうか。   `https://cybozudev.zendesk.com/hc/ja/articles/202341964-%E9%A1%A7%E5%AE%A2%E8%A8%AA%E5%95%8F%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%94%E3%83%B3%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B` `上記の記事のことでしょうか？であれば、下記がマーカーのオプション設定ですが、 下記でいうと、` `「FF8060」→背景色` `「000000」→文字色` `というふうな指定がされているので、必要に応じて変更してください。`   `marker[i] = ``new` `google.maps.Marker({` ` position: m_latlng[i],`   map: map, ` ``// ポインタのアイコンは Google Charts を使用します` ` ``icon: ``'https://chart.googleapis.com/chart? chst=d_bubble_text_small&chld=edge_bc|'` `+ recno[i] + ``'|FF8060|000000'` `});`     下記、iconのサンプルです。下記は背景が黄色、テキストが赤で表示されます。（テキスト内容は「１」） [https://chart.googleapis.com/chart?chst=d\_bubble\_text\_small&chld=edge\_bc|1|FFFF00|FF0000](https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc%7C1%7CFFFF00%7CFF0000) ---
**Author:** ![Legacy\_Account156](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@Legacy\_Account156](https://community.cybozu.dev/u/Legacy_Account156)\ **Post date:** [2015 年 12 月 11 日午前 9:04 UTC](https://community.cybozu.dev/t/topic/2311/5 "2015-12-11T09:04:52Z")
村濱一樹様 返信頂きありがとうございます。 またご連絡が遅くなり申し訳ございません。 例えばA社はみどり ``` B社はあか ``` などの場合はどのように行えばよいのでしょうか。 初心者のためかなり苦戦しております。 お教え頂ければ幸いです。 宜しくお願い致します。 ---
**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\ **Post date:** [2015 年 12 月 14 日午後 10:58 UTC](https://community.cybozu.dev/t/topic/2311/6 "2015-12-14T22:58:00Z")
\> 例えばA社はみどり \> B社はあか \> などの場合はどのように行えばよいのでしょうか。   色を固定したいのであれば、アプリに色を指定するフィールドを設定するのがいいかもしれません。そのデータを変数に格納し、下記のようにicon指定時に色を設定できます。（下記はrecColor変数に色の情報が入っている場合） ` ``icon: ``'https://chart.googleapis.com/chart? chst=d_bubble_text_small&chld=edge_bc|'` `+ recno[i] +``'|' + recColor[i] + '|000000'`   `-----------`   \> 初心者のためかなり苦戦しております。   参考にされている記事のコードは初心者には扱いづらいかと思います。JavaScriptでカスタマイズできるのはkintoneの魅力ではありますが、ある程度カスタマイズしていこうとするとJavaScriptの学習は必須です。下記のような入門書を探し、学習することをおすすめします。 [http://kensawai.com/blog/javascript-%E5%88%9D%E5%BF%83%E8%80%85-%E6%9C%AC.html](http://kensawai.com/blog/javascript-%E5%88%9D%E5%BF%83%E8%80%85-%E6%9C%AC.html)