IBUSHIKIN: railsでgoogle mapを表示

2010-10-11

railsでgoogle mapを表示

[目的]rails3.0でgoogle mapを表示する。
[環境]rails3.0 + ruby1.8.7

(1)プロジェクト作成
rails new googlemap

(2)コントローラ作成
rails g controller maps index

(2)index.html.erbを編集。

    <div id="map" style="width: 500px; height: 500px"></div>
    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(38, 138), 5);
      map.disableDragging();
    }
    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
          alert("x = " + point.x + ", y = " + point.y);
          map.openInfoWindow(point,
          document.createTextNode("openInfoWindow Test"));
      }
    });
    //]]>
    </script>

(3)application.html.erbを編集。
script srcを追加。

<!DOCTYPE html>
<html>
<head>
  <title>Googlemap</title>
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults %>
  <%= csrf_meta_tag %>
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAABWYMASZTPMzQMXu2alSa6xTvcRCYKSpWpPqDL-sNMuxVdHFI_BTd8zF9kdpV97QhhvGd0NWsQckXsw"
      type="text/javascript"></script>
</head>
<body>

<%= yield %>

</body>
</html>

(4)サーバ起動
rails s

[関連エントリ]
GoogleMapでマッシュアップの練習（Rails編） #2

0 件のコメント:

コメントを投稿