The story so far: If you’ve been reading along, you’ll have learned how to add maps, markers, and listeners, and it’s all been too easy: a few lines in a controller, a bit of modular reusable javascript, the merest of touches to your views.

‘Okay’, I can hear you say, ‘that’s all well and good, but I want to do more with my markers! I want to be able to click on my marker and have it reveal a nice little piece of html formatted text! I want to be able to use my own personal type of marker shaped like a truck!! I want to be able to click on the map and be teleported there in real time!!’

Okay, okay, simmer down, we’re getting there.

The javascript

We are going to create our marker in much the same way as we created our listener in Part III, using an external, modular, re-usable javascript function.

Create a new file called ‘_createWithIconAndHtml.mjs’ in your mapping/public/javascripts/map_js directory and cut and paste the following javascript into that file.

function createMarker(point,html,icon_image) {
              var icon = new GIcon();

              icon.image =   icon_image  ;

              icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
              icon.iconSize = new GSize(12, 20);
              icon.shadowSize = new GSize(22, 20);
              icon.iconAnchor = new GPoint(6, 20);
              icon.infoWindowAnchor = new GPoint(5, 1);

              var marker = new GMarker(point,icon);

              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
              });
            return marker;
          }

We didn’t have to give it such a long name, but 1) it’s explicit and expressive and 2) it gives your fingers more exercise than just cut and paste, and as I’ve made this all so easy for you I thought I’d give you some work to do to stop you falling asleep.

You will also notice that the name of the function is different from the name of the file. This merely demonstrates that the two do not have to be the same.

The image

Clearly, we are going to need an image for our marker. You wanted a truck (or perhaps a tardis!), but in light of recent news regarding climate change, I’m not going to give you the truck as I’m imposing a truck moratorium on my maps until I can determine the effect it has on my carbon footprint, and as for the tardis, well, I suspect there’ll be copyright issues there.

But, here’s a nice innocuous blue marker spot you can use: right click (or control click, or whatever fancy clicky-button-press your own brand of OS uses) and save it to gmapping/public/images

The Controller code

Once again, edit your map_controller file and copy the following the method into the file.

def scripted_marker_with_icon_and_html

    @page_title = action_name

    @gmap = Mappa::GMap.new()

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

    marker_lat = 51.77530
    marker_lng = -0.002


    # Here we read our _createWithIconAndHtml.mjs file, telling gmap we're using this 

    @gmap.use_marker_code('createWithIconAndHtml', :with_args => [:point, :html, :icon_image])

    incident_point = Mappa::GLatLng.new(:lat => marker_lat, :lng => marker_lng)
    @gmap.add_marker(:point => incident_point, :create_with => 'createWithIconAndHtml', :html => "'Click <a href="#">here</a> to teleport!'", :icon_image => "'/images/marker6.png'")    

    render :template => "map/index"
  end

Let’s look at that again. What did we add to our controller?

@gmap.use_marker_code('createWithIconAndHtml', :with_args => [:point, :html, :icon_image])

That one line tells Mappa to use the _createWithIconAndHtml.mjs file to find the create marker code.

@gmap.add_marker(:point => incident_point, :create_with => 'createWithIconAndHtml', :html => "'Click <a href="#">here</a> to teleport!'", :icon_image => "'/images/marker6.png'")

And that’s our one line, nice and nifty, little add_marker code. I don’t think it needs much explanation for now, suffice to say: notice the way we use :html, :point and :icon_image, and how it ties into the :with_args argument of gmap.use_marker_code.

And that’s it. We’re all done now. Try it out: http://localhost:3000/map/scripted_marker_with_icon_and_html and don’t forget to click on the marker to see the html!

“Hey!” I hear you bellow ( Shhhh…. for it is the day after new year and some of us still have a sore head!)

“hey” I hear you whisper (thank you!), “What about the teleporting?”

Oh yes, teleporting. I did mention teleporting, didn’t I. Well, I’ve got to leave you something to do, or it’s all just too easy, isn’t it! So I’m leaving the teleportation code as an exercise for the reader.

Happy new year.