<style>
#multi_markers {
  margin: 0 auto;
}
</style>


    <section id="themap">
    <div id="multi_markers" style='width: 70em; height: 50em;'></div>
    </section>

    <script src="//maps.google.com/maps/api/js?v=3.23&key=AIzaSyDIbobYMlFEHplUczEWxWLHhzunaXiCXhs"></script>
    <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
    <script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

    <script>
    window.onload = function() {
          handler = Gmaps.build('Google');
          handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
          markers = handler.addMarkers([
            <% @artists.each do |artist| %>
            {
              "lat": <%= artist.latitude %>,
              "lng": <%= artist.longitude %>,
              "infowindow": '<a href="/artists/<%= artist.id %>"><%= artist.name %></a>'
            },
            <% end %>
          ]);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();
        });
              markers = handler.addMarkers(<%=raw @hash.to_json %>);
            };
    </script>
  </div>