Posted by nito, Tue Jan 01 02:09:00 UTC 2008

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!

Filed Under: Geekliness Tutorial | Tags: gmap gmap2 google maps mappa plugin rails ruby Ruby on Rails ruby on rails