Question

I’m trying to make my first jQuery plugin. Basically it’s just like a wrapper to a goMap map which updates some latitude and longitude text fields whenever someone moves the marker on a google map.

I have it set up like this (this is going to look pretty rough because I wrote it in coffeescript and am just translating as I write the question so ignore any missing semi-colons or whatever please!):

(function($) {
  $.fn.correctionMap = function(options) {
    defaults = {
      latFieldSelector: "#listing_latitude"
      longFieldSelector: "#listing_longitude"
      resetLinkSelector: "#reset_marker_link"
      marker_id: 'listing_marker'
    }

    options = $.extend(defaults, options);

    // grab the text field elements
    latField = $(options.latFieldSelector)
    longField = $(options.longFieldSelector)

    // inialise the map go-ordinates from the
    // values in the text fields
    initialLat = Number(latField.val())
    initialLong = Number(longField.val())

    // build the options object for the goMap plugin
    map_options = {
      longitude: initialLong
      latitude: initialLat
      zoom: 16
      maptype: 'ROADMAP'

      markers: [{
        longitude: initialLong
        latitude: initialLat
        draggable: true
        id: options.marker_id
      }]
    };

    // add the map to the div
    return this.goMap(map_options)
)(jQuery)

Then when I call it with $("#correction_map").correctionMap() it doesn’t seem to do anything. Yet when I console.log this.goMap(map_options) from inside the plugin, it looks like it is getting initialized fine (cursory inspection). Am I doing the return wrong or something?

Answer 1

Turns out you have to give the div which is the target for the map a height and width with CSS when you use goMap. The Javascript in my question is fine. Oops!