Table of Contents

핸드폰 위치 매핑된 마커

http://donghee8.com:4567/map

Install

sudo apt-get install rubygems ruby1.8-dev
sudo gem install sinatra data_mapper dm-sqlite-adapter do_sqlite3

Run

ruby ballon.rb

Code

ballon.rb 

require 'rubygems'
require 'sinatra'
require 'data_mapper'
 
DataMapper::setup(:default, "sqlite3://#{Dir.pwd}/location.db")
 
class Location
  include DataMapper::Resource
  property :id, Serial
  property :latitude, String
  property :longitude, String
  property :created_at, DateTime
end
 
DataMapper.finalize
Location.auto_upgrade!
 
post '/' do
  html = "lat,lng: #{params[:latitude]}, #{params[:longitude]}"
  ballon = Location.new(:latitude => params[:latitude], 
                 :longitude => params[:longitude])
  ballon.save
  return html
end
 
get '/' do
  html = '<?xml version="1.0"?><markers>'
  ballon = Location.all(:order => [ :id.desc ])
  ballon.each do | g |
    html+="<marker><lat>#{g.latitude}</lat><lng>#{g.longitude}</lng></marker>"
  end
  html+= '</markers>'
  return html
end
 
get '/map' do
  erb :map
end

views/map.erb 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var myOptions;
      placeMarkers = function(filename) {
        $.get(filename, function(xml){
          $(xml).find("marker").each(function(){
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
            var marker = new google.maps.Marker({
              position: point,
              map: map
            });
            marker.setMap(map);
          });
        });
      }

      function initialize() {
        var latLng = new google.maps.LatLng(37.556, 126.902);
        myOptions = {
         center: latLng,
         zoom: 14,
         mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }

      $(document).ready(function() {
        initialize();
        placeMarkers('/');
      });
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>