2015.6.10
CSVで作ったデータを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; }); });