ERB view file for tutorial 22 server code

tutorial_22_example_1_file_3.html

<img src='/assets/photo_metadata_1_400.jpg' alt='photo of snow geese in Skagit Valley, WA, USA'>
<br>
<div id="map_canvas"></div>
<br>
Latitude / Longitude &nbsp;  <%= sprintf("%10.5f", @latitude_0) %>, <%= sprintf("%10.5f", @longitude_0) %>
<br>

<br>
<h2>Dump of all the Metadata for this Image</h2>
<table>
<% @photo.tags.each do |tag| %>
  <% next if tag.nil? or tag =~ /^\s*$/ %>
  <tr><td><%= tag %></td>
      <td><%= @photo[tag] %> </td>
  </tr>
<% end %>
</table>

<!-- ------------------------------------------------------------ -->
<style>
  #map_canvas {
    height: 270px;
    width: 400px;
  }
</style>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&sensor=false"></script>
<script>
  function initialize() {

    var myLatlng = new google.maps.LatLng( <%= @latitude_0 %>, <%= @longitude_0 %> );
    var mapOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var lineCoordinates = [
      new google.maps.LatLng(<%= @latitude_0 %>, <%= @longitude_0 %>),
      new google.maps.LatLng(<%= @latitude_1 %>, <%= @longitude_1 %>)
    ];

    var circle_symbol = {
      path: google.maps.SymbolPath.CIRCLE
    };

    var arrow_symbol = {
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
    };

    var path = new google.maps.Polyline({
      path: lineCoordinates,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      map: map,
      icons: [
        { icon: circle_symbol,
          offset: '0%' },
        { icon: arrow_symbol,
          offset: '100%' }
      ],
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>