Very simple google map plugin

simple-google-map-plugin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST API Google Map</title>
    <style>
      html, body, #map-canvas {
        background: blue;
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

</head>
<body>
    <div id="map-canvas"></div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"></script> -->

    <script src="googleMap.js"></script>

    <script>
      $('#map-canvas').googleMap();
    </script>
</body>
</html>

simple-google-map-plugin.js

;(function( window, document, $, undefined ) {
    'use strict';

    var MAP = MAP || {};

    MAP.defaultOptions = {};

    MAP.init = function(element, options){
        var base = this;

        base.$element = $( element );
        base.element = element;

        base.options = $.extend({}, MAP.defaultOptions, options );

        MAP.creation(base);

        MAP.marker(base);

    };

    MAP.creation = function(base){
        base.myLatlng = new google.maps.LatLng(-25.363882,131.044922);

        var mapOptions = {
            center: base.myLatlng,
            zoom: 8
        };
        base.map = new google.maps.Map(document.getElementById(base.element[0].id), mapOptions);
    };

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

    $.fn.googleMap = function( options ) {
        return new MAP.init( this, options );
    };

})( window, document, jQuery );