<td><%= f.text_area :body, :cols => 80 %></td>
</tr>
<tr valign="top">
- <th>Location</th>
- <td><a name="map"></a><div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 300px; display: none;"></div>
- <span class="location">Latitude: <%= f.text_field :latitude, :size => 20, :id => "latitude" %> Longitude: <%= f.text_field :longitude, :size => 20, :id => "longitude" %></span> <a href="#map" id="usemap" onclick="document.getElementById('map').style.display = 'block'; document.getElementById('usemap').style.display = 'none';">use map</a> </td>
- </tr>
+ <th>Location</th>
+ <td>
+ <div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 400px; display: none;"></div>
+ <span class="location">Latitude: <%= f.text_field :latitude, :size => 20, :id => "latitude" %> Longitude: <%= f.text_field :longitude, :size => 20, :id => "longitude" %></span>
+ <a href="javascript:openMap()" id="usemap">use map</a>
+ </td>
+ </tr>
<tr>
<th></th>
<td><%= submit_tag 'Save' %></td>
<% zoom = '12' %>
<% end %>
-<script type="text/javascript" src="/openlayers/OpenLayers.js"></script>
+<%= javascript_include_tag '/openlayers/OpenLayers.js' %>
+<%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
<%= javascript_include_tag 'map.js' %>
<script type="text/javascript">
<!--
var marker;
- function init(){
- var centre = lonLatToMercator(new OpenLayers.LonLat(<%= lon %>, <%= lat %>));
+ function init() {
+ var centre = new OpenLayers.LonLat(<%= lon %>, <%= lat %>);
var zoom = <%= zoom %>;
var map = createMap("map");
- map.setCenter(centre, zoom);
+ setMapCenter(centre, zoom);
map.events.register("click", map, setLocation);
}
function setLocation( e ) {
closeMapPopup();
- var merc = map.getLonLatFromViewPortPx(e.xy);
- var lonlat = mercatorToLonLat(merc);
+ var lonlat = getEventPosition(e);
document.getElementById('latitude').value = lonlat.lat;
document.getElementById('longitude').value = lonlat.lon;
marker = addMarkerToMap(merc, null, "Diary entry location");
}
+ function openMap() {
+ $("map").style.display = "block";
+ $("usemap").style.display = "none";
+ }
+
window.onload = init;
// -->
</script>