Comparison of old and new calls to gmaps4rails (Google Maps For Rails - https://github.com/apneadiving/Google-Maps-for-Rails)

gmaps4rails_compare

## gmaps4rails v1

## controller

      @json = @shops.to_gmaps4rails do |shop, marker|
        marker.infowindow render_to_string(partial: "/shops/map_info_window", locals: { object: shop})
      
        icon_name = "wl_sm_icon"
        unless shop.shop_group.nil?
          if (shop.shop_group.name.downcase =~ /pen/) != nil
            icon_name = "penalty"
          elsif (shop.shop_group.name.downcase =~ /agent/) != nil
            icon_name = "agent"
          end
        end
        marker.picture({
                        picture: "http://mcr3-images.s3.amazonaws.com/wettenleip/#{icon_name}.png",
                        width: 18,
                        height: 18
                       })
        marker.title shop.name
        marker.sidebar = "#{shop.name} - #{shop.location}"
        marker.json({ id: shop.id, country: "random" })
      end

## view
	<div class="span-10">
		<div id="shops_outer" style="height:100px">
			<div id="shops_inner" style="width : 100%; height : 100px; overflow : auto;">
				<ul class="zebra" id="markers_list">  </ul>
			</div>
		</div>
	</div>

<div class="span-19 last">
	<%= gmaps( "map_options" => {	
		"auto_adjust" => false, 
		"auto_zoom" => false, 
		"zoom" => 6, 
		"bounds" => '[{"lat": 54, "lng": 6 }, {"lat": 48 , "lng": 15 }]'
	},
	"markers" => { 
		"data" => @json, 
		"options" => {"list_container" => "markers_list", "randomize" => false, "max_random_distance" => 10000 } 
	}) %>
</div>

## gmaps4rails v2

## controller

      i = 0
      @hash = Gmaps4rails.build_markers(@shops) do |shop, marker|
        marker.lat shop.latitude
        marker.lng shop.longitude
        marker.title shop.name
        @sidebars << "<li><a href=\"javascript:myclick('#{i}')\">#{shop.name} - #{shop.location}<\/a></li>"
        marker.json({ id: shop.id, country: "random" })
        i += 1
      end

## view

	<div class="span-10">
		<div id="shops_outer" style="height:100px">
			<div id="shops_inner" style="width : 100%; height : 100px; overflow : auto;">
				<ul class="zebra" id="markers_list">  </ul>
			</div>
		</div>
	</div>
<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<div class="span-19 last">
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<% content_for :javascript do %>
	<script type="text/javascript">
		$(document).ready(function(){
			handler = Gmaps.build('Google', {markers: { maxRandomDistance: 10000} });
		    handler.buildMap({ provider: {zoom: 6}, internal: {id: 'map'}}, function(){
				markers = handler.addMarkers(<%=raw @hash.to_json %>);
			    handler.map.centerOn({ lat: 51, lng: 11 });
		    });

			$("#markers_list").append(<%=raw @sidebars%>);
		});
	</script>
<% end %>