googlemaps4rails

gistfile1.html

rendered  
<div class="widget-content">
      

          <h5>Discothek Villa</h5>

          <p>Bruckdorf 469, 5571, Mariapfarr, Austria</p>

          <div id="map_wrapper">
            <div id="map_sidebar"></div>
          </div>

          <!-- Map Script -->
          

          <script type="text/javascript" charset="utf-8">
              $(document).ready(function () {
                  function createSidebarLi(json) {
                      if (json.distance == 0.0) {
                          return
                      } else {
                          dist = " / " + json.distance + "km";
                          return ("<li><a>" + json.title + "</a> (" + json.categories + "...)" + dist + "</li>");
                      }
                  };

                  function bindLiToMarker($li, marker) {
                      $li.on('click', function () {
                          handler.getMap().setZoom(14);
                          marker.setMap(handler.getMap()); //because clusterer removes map property from marker
                          marker.panTo();
                          google.maps.event.trigger(marker.getServiceObject(), 'click');
                      })
                  };

                  function createSidebar(json_array) {
                      _.each(json_array, function (json) {
                          var $li = $(createSidebarLi(json));
                          $li.appendTo('#map_sidebar_container');
                          bindLiToMarker($li, json.marker);
                      });
                  };

                  handler = Gmaps.build('Google');

                  handler.buildMap({provider: {
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      styles: mapStyle_dark },
                      internal: {
                          id: 'map_sidebar'}}, function () {

                      var json_array = [{"lat":47.1481679,"lng":13.7301865,"title":"Discothek Villa","categories":"Bars","distance":0.0,"infowindow":"<div class=\"infowindow\" style=\"color: #000000;\">\n  <h3 style=\"color: #000000\"><a href=\"/de/location/discothek-villa?categories=Bars&amp;coordinates=13.7301865%2C+47.1481679&amp;distance=0.0&amp;name=Discothek+Villa\">Discothek Villa</a></h3>\n  <p></p>\n  <p>Bars</p>\n</div>","picture":{"anchor":[16,16],"url":"/assets/map/icons/3dmarker.png","width":"32","height":"32"}}];
                      var markers = handler.addMarkers(json_array);
                      console.log(json_array);

                      _.each(json_array, function (json, index) {
                          json.marker = markers[index];
                      });
                      createSidebar(json_array);
                      google.maps.event.trigger(markers[0].getServiceObject(), 'click');
                      handler.bounds.extendWith(markers);
                      handler.fitMapToBounds();
                  });
              });
          </script>


    </div>
    
    
    in html.erb
    
    
    <div id="map_wrapper">
            <div id="map_sidebar"></div>
          </div>

          <!-- Map Script -->
          <%= content_for :head_end do %>
              <%= javascript_include_tag 'google_maps_styles' %>
          <% end %>


          <script type="text/javascript" charset="utf-8">
              $(document).ready(function () {
                  function createSidebarLi(json) {
                      if (json.distance == 0.0) {
                          return
                      } else {
                          dist = " / " + json.distance + "km";
                          return ("<li><a>" + json.title + "</a> (" + json.categories + "...)" + dist + "</li>");
                      }
                  };

                  function bindLiToMarker($li, marker) {
                      $li.on('click', function () {
                          handler.getMap().setZoom(14);
                          marker.setMap(handler.getMap()); //because clusterer removes map property from marker
                          marker.panTo();
                          google.maps.event.trigger(marker.getServiceObject(), 'click');
                      })
                  };

                  function createSidebar(json_array) {
                      _.each(json_array, function (json) {
                          var $li = $(createSidebarLi(json));
                          $li.appendTo('#map_sidebar_container');
                          bindLiToMarker($li, json.marker);
                      });
                  };

                  handler = Gmaps.build('Google');

                  handler.buildMap({provider: {
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      styles: mapStyle_dark },
                      internal: {
                          id: 'map_sidebar'}}, function () {

                      var json_array = <%= raw @hash.to_json %>;
                      var markers = handler.addMarkers(json_array);
                      console.log(json_array);

                      _.each(json_array, function (json, index) {
                          json.marker = markers[index];
                      });
                      createSidebar(json_array);
                      google.maps.event.trigger(markers[0].getServiceObject(), 'click');
                      handler.bounds.extendWith(markers);
                      handler.fitMapToBounds();
                  });
              });
          </script>