Comment créer un plugin jQuery utilisant un autre plugin jQuery?

Question

J'essaie de faire mon premier plugin jQuery. Fondamentalement, il est juste comme un wrapper à une carte goMap qui met à jour certains champs de texte de latitude et de longitude chaque fois que quelqu'un déplace le marqueur sur une carte google.

Je l'ai mis comme ça (ça va regarder assez rude parce que je l'ai écrit dans coffeescript et je suis juste Traduisant comme j'écris la question pour ne pas tenir compte des points-virgules ou quoi s'il vous plaît manquants!):

(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) 

Puis quand je l'appelle avec $("#correction_map").correctionMap() il ne semble rien faire. Pourtant, quand je console.log this.goMap(map_options) de l'intérieur du plugin, il semble qu'il est bien initialisé (inspection superficielle). Est-ce que je fais le mauvais retour ou quelque chose?

Answer 1

Il s'avère que vous devez donner à la div qui est la cible de la carte une hauteur et une largeur avec CSS lorsque vous utilisez goMap. Le Javascript dans ma question est bien. Oops!