Now let’s look at adding markers, special google navigation controls, onload functionality and then let’s refactor and add a little Rails DRYness.
1) Adding a marker
Open map_controller.rb (you will find it in gmapping/app/controllers) in your favourite editor (no, let’s not go there!). Add the following method:
def marker
@page_title = 'My first map with marker!'
@gmap = Mappa::GMap.new()
# the gmap api key for localhost:3000 - remember to change this!
@gmap.api_key = "ABQIAAAArjtwNyA-0TDmcb74hMzhHBTJQa0g3IQ9GZqIMmInSLzwtGDKaBRSDWK-cqMmi3YB5dD-8a6Kwe1Qmg"
@gmap.lat = 51.775362610
@gmap.lng = -0.00100011
# now for the lat and lng of the marker we want to add.
marker_lat = 51.78530
marker_lng = -0.015
#create our marker
marker = Mappa::GLatLng.new(:lat => marker_lat, :lng => marker_lng)
#add the marker to the map.
@gmap.add_marker(:point => marker)
@gmap.zoom = 12
@gmap.onload = false
endNow let’s create the view file. This is very easy, because there are no changes to the file aside from the dynamically created javascript. By default, rails will look for a marker.rhtml file in gmapping/app/views/map. So, let’s copy our index.rhtml to marker.rhtml.
That’s it. go and try it.: http://localhost:3000/map/marker.
2) Adding google map controls and drying it up a bit
The method for adding controls is: Mappa.add_control(:control => ‘controltype’) The control can be one of: small, large, type, overview.
edit the map_controller.rb again and add the following lines to the bottom of the marker method you added (see above).
@gmap.add_control(:control => 'small')
@gmap.add_control(:control => 'type')
@gmap.add_control(:control => 'overview')Because there was no difference between our index.rhtml and our marker.rhtml, we didn’t really need it, so let’s tell rails to render the same layout the for the marker method as we used for the index method. Add the following line to the very end of the method, just above the ‘end’ statement:
render :template => 'map/index'Your marker method should now look like this:
def marker
@page_title = 'My first map with marker!'
@gmap = Mappa::GMap.new()
# the gmap api key for localhost:3000 - remember to change this!
@gmap.api_key = "ABQIAAAArjtwNyA-0TDmcb74hMzhHBTJQa0g3IQ9GZqIMmInSLzwtGDKaBRSDWK-cqMmi3YB5dD-8a6Kwe1Qmg"
@gmap.lat = 51.775362610
@gmap.lng = -0.00100011
# now for the lat and lng of the marker we want to add.
marker_lat = 51.78530
marker_lng = -0.015
#create our marker
marker = Mappa::GLatLng.new(:lat => marker_lat, :lng => marker_lng)
#add the marker to the map.
@gmap.add_marker(:point => marker)
@gmap.zoom = 12
@gmap.onload = false
@gmap.add_control(:control => 'small')
@gmap.add_control(:control => 'type')
@gmap.add_control(:control => 'overview')
render :template => 'map/index'
endTake another look: http://localhost:3000/map/marker
3) Getting it all out of the body, into the head and using onload (and introducing partials and helpers!)
To call something via onload in the header of our page, to actually include that content into the header section, and to keep it all nice and DRY requires a few new steps.
First let’s edit our layout file. open gmapping/app/views/layout/map.rhtml in your editor and replace the line that contains the body tag:
<body>with
<%= body_tag_creator %>the ‘body_tag_creator’ is something new: a helper method. change directory to: mapping/app/helpers and open the application_helper.rb file in your favourite editor, and add the body_tag_creator method. When you’ve finished, your file should look like this:
module ApplicationHelper
def body_tag_creator
if !@gmap.nil? && @gmap.onload
'<body onload="' + @gmap.onload_func_name + '()" onunload="GUnload">'
else
'<body>'
end
end
endThis new method is now available to every view. We could also have restricted it to those views generated by the map_controller, by only adding it to the map_helper.rb. Helpers help us to keep view generating code out of our view files.
Add the following method to your map_controller.rb:
def marker_onload
@page_title = 'My first map with marker!'
@gmap = Mappa::GMap.new()
# the gmap api key for localhost:3000 - remember to change this!
@gmap.api_key = "ABQIAAAArjtwNyA-0TDmcb74hMzhHBTJQa0g3IQ9GZqIMmInSLzwtGDKaBRSDWK-cqMmi3YB5dD-8a6Kwe1Qmg"
@gmap.lat = 51.775362610
@gmap.lng = -0.00100011
# now for the lat and lng of the marker we want to add.
marker_lat = 51.78530
marker_lng = -0.015
#create our marker
marker = Mappa::GLatLng.new(:lat => marker_lat, :lng => marker_lng)
#add the marker to the map.
@gmap.add_marker(:point => marker)
marker2_lat = 51.7900
marker2_lng = -0.025
#create our marker
marker2 = Mappa::GLatLng.new(:lat => marker2_lat, :lng => marker2_lng)
#add the marker to the map.
@gmap.add_marker(:point => marker2)
@gmap.zoom = 12
@gmap.add_control(:control => 'large')
@gmap.add_control(:control => 'type')
@gmap.add_control(:control => 'overview')
endNow let’s create a new view, and in the process introduce the rails :partial template.
create a file called marker_onload.rhtml in gmapping/app/views/map. Edit that file and add the following layout:
<%= render :partial => 'headers' %>
<div style="height:400px;width:400px" id="gmap"></div>That’s it for the view, now let’s look at the partial. The name of the partial, according to the render call in the marker_onload.rhtml file, is ‘headers’. All partial file names start with an underscore, so, create a file called _headers.rhtml in gmapping/app/views/map. Edit that file and add the following layout:
<% content_for :map_headers do %>
<%= map_header(@gmap) %>
<%= map_body(@gmap) %>
<% end %>Why did we use a partial? Partials are generally used for small chunks of oft used code. In this case we are saving ourselves repetitive use of those four lines of markup, as it’s highly likely we will be using them again. Notice also, that the map_body mappahelper method is now included along with map_header in the
section of the web page. We’re doing this because we are now going to be calling our map generating javascript from an onload that looks to the section for its code.And that’s all for now folks. If you’ve been following along, you should be able to see what you’ve done by point your browser to: http://localhost:3000/map/marker_onload
Next: handling map events, creating more custom marker creation methods and reading from external .mjs files
