Differences

This shows you the differences between two versions of the page.

--- sinatra [2012/01/17 06:44] – created 119.192.238.152
+++ sinatra [2018/07/18 14:10] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+핸드폰 위치 매핑된 마커
+http://donghee8.com:4567/map
 ====== Install ======
 <code>
-sudo apt-get install rubygems
+sudo apt-get install rubygems ruby1.8-dev
 sudo gem install sinatra data_mapper dm-sqlite-adapter do_sqlite3
 </code>
+====== Run ======
+ruby ballon.rb
+====== Code ======
+ballon.rb
+<code ruby>
+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
+</code>
+views/map.erb
+<code>
+<!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>
+</code>