So, we’ve added a marker via code in our controller, we’ve added those google map controls, we’ve put our javascript map code into the header (thus allowing us to take better advantage of the ‘Gunload’ garbage collection method) but we want to do more. We crave more power…We’re itching to handle map clicks and write our own, more complex, more specific Javascript. Oh what fun!

So, here goes…

User story: When I click on the map, i want it to place a marker on the spot I click. When I click on a marker i want it to delete that marker.

First we want some Javascript. A function that fulfills the user story. Here’s one I baked earlier:

function addMapPinClick(marker, point) {
          if (marker) {
            gmap.removeOverlay(marker);

            } else {
              gmap.addOverlay(new GMarker(point));
            }  
      }

Okay, so the next question must surely be: ‘where do we put it?’ Navigate to your mapping/public/javascripts directory and create a new directory called map_js. Inside that directory create a file called ‘_addMapPinClick.mjs’.

Now, copy and paste that little function above, into your new _addMapPinClick.mjs file. And that’s our Javascript done. Really. No more. I promise.

Now let’s edit mapping/app/controllers/map_controller.rb. We are going to create a new method called map_with_onclick

def map_with_onclick

    # Because I can't be bothered to think too hard, let alone think up a name, 
    # I've let rails do my thinking for me and used action_name to get hold of the
    # name of this action, and store it in the @page_title instance variable. 
    @page_title = action_name

    @gmap = Mappa::GMap.new()

    # Much better to store our api key in one place. Here we are using a class variable 
    # that we'll place at the top of this controller file (after the class definition). We may 
    # eventually decide it's best placed in the application.rb
    @gmap.api_key = @@key

    @gmap.lat = 51.775362610
    @gmap.lng = -0.00100011

    @gmap.zoom = 16
    @gmap.add_control(:control => 'large')
    @gmap.add_control(:control => 'type')

    #This is where we read in our function
    @gmap.include_funcs('addMapPinClick')

    # Here we add our listener. The method call is pretty self-explanatory, methinks.
    @gmap.add_listener( :element => 'gmap', :action => 'click', :method => 'addMapPinClick')

    # Once again, we're doing nothing special here, so why not reuse our 
    # marker_onload template, eh? :-)
    render :template => "map/marker_onload"

  end

The top of that file now also needs to have the @@key variable. Once you’ve made your edits, the top of the controller file should look like this:

class MapController < ApplicationController

  #This is the google map API key for localhost:3000. Don't forget to change it when you need to!
  @@key = 'ABQIAAAArjtwNyA-0TDmcb74hMzhHBTJQa0g3IQ9GZqIMmInSLzwtGDKaBRSDWK-cqMmi3YB5dD-8a6Kwe1Qmg'

Now go back to your browser and try it out: http://localhost:3000/mapping/map_with_onclick.

Neat, eh?

Next: adding markers with extra cruft!

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

  end

Now 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'

  end

Take 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

end

This 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')

  end

Now 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