"TypeError: a is undefined" when using JQuery plugin with no element

Question

I have the following JQuery plugin:

$(function () {

  $.fn.mapit = function (position, styles) {

    var self = $(this);

    var map = new google.maps.Map(self[0], {
      center: position,
      styles: styles
    });

    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    return $(this);

  }  
});

And I call it using something like:

google.load("maps", "3", callback: function() {    

  $("div#office").mapit({ lat: 38.73972, lng: -9.144263 }, [{"featureType":"all"}]);

});

The problem is when I call mapit and there is no div#office on the page I get the following error:

TypeError: a is undefined

What should I do in my plugin to avoid this?

Add `if ($("div#office").length > 0)` before your mapit call? https://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery?rq=1 — freedomn-m, Sep 18 '17 at 11:37
Check the `typeof self` inside the plugin to see what you get. — skobaljic, Sep 18 '17 at 11:38

freedomn-m · Accepted Answer · 2017-09-18T12:49:42.033

As the code is your own plugin, you can extend your plugin to handle multiple selectors/elements by adding

return $(this).each(function() {

to the top of your plugin:

$(function () {
  $.fn.mapit = function (position, styles) {

    return $(this).each(function() {

      var self = this;

      var map = new google.maps.Map(self, {
        center: position,
        styles: styles
      });
      var marker = new google.maps.Marker({
        position: position,
        map: map
      });
    }
  }  
});

For more information, see the plugin tutorial, specifically, using the each method:

https://learn.jquery.com/plugins/basic-plugin-creation/#using-the-each-method

Then, if div#office doesn't exist, there's nothing in the loop and all's good.

"TypeError: a is undefined" when using JQuery plugin with no element

1 Answers1