Blog

外部CSVをGooglemap API v3地図上にプロットする

2015.06.10 | jQuery | 1398views


a0001_007035CSVで作ったデータをGooglemap API v3で地図上に一括プロットするJavascriptサンプルです。見ていただくとわかりますが、HTML内に以下の記述が必要です。外部のCSVがスクリプトに沿った形式であればそのまま読み込みが可能ですが、CSVの形式が異なる場合はそれに合わせてスクリプトの中身を書き換えてお使いください。GoogleMap v3での動作となります。

<div style="width:1000px;height:600px;" id="map_canvas"></div>
<input type="file" id="filename" name="filename"/>
[/html

CSVの形式はこの場合 マーカー名,lat,lng で保存しておきます。


$(document).ready(function(){
                var markers = [];  
                var myCenter=new google.maps.LatLng(35.673343,139.710388);
                var mapProp = {
                        center:myCenter, 
                        zoom:6,
                        minZoom:6,          
                        mapTypeId : google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: true           
                    };
     
                 var map = new google.maps.Map(document.getElementById("map_canvas"),mapProp); 

                  $("#filename").change(function(e) {

                     if (e.target.files != undefined) {

                            var reader = new FileReader();
                            reader.onload = function(e) {

                                      var csvval=e.target.result.split("\n");
                                      var csvvalue;                                          

                                      for(var i = 0;i < csvval.length;i++)
                                      {
                                              markers[i] = []; 
                                              csvvalue = csvval[i].split(",");
                                              markers[i][0] = csvvalue[0]; //id
                                              var lat = csvvalue[1]; //latitude
                                              var lng = csvvalue[2]; //longitude
                                              markers[i][1] = new google.maps.Marker({
                                                   position: new google.maps.LatLng(lat,lng),
                                                   map: map                  
                                              });
                                       }

                             };
                             reader.readAsText(e.target.files.item(0));
                       }

                     return false;

                    });
            });

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI