[Google map] #gmap

markup.html

<div class="container">
  <div data-toggle="map"></div>
</div>

script.js

"use strict";

/**
 * Set Google Map into the created wrapper.
 * @class
 * @param {Object} options - Object with options.
 * @param {string} options.key - API key.
 * @param {string} options.container - Container selector.
 * @param {Object} options.coordinates - Map coordinates.
 * @param {number} options.coordinates.lat - Map latitude.
 * @param {number} options.coordinates.lng - Map longitude.
 * @param {Object} [options.markerCoordinates] - Marker coordinates.
 * @param {number} options.markerCoordinates.lat - Marker latitude.
 * @param {number} options.markerCoordinates.lng - Marker longitude.
 * @param {number} options.zoom - Map zoom level.
 * @param {string} [options.marker] - Path to marker image.
 * @param {Object} [options.styles] - Json object with styles.
 * @version 1.0.0
 * @author Daur Gamisonia <daurgam@gmail.com>
 * @example
 * var googleMap = new GoogleMap({
 *   container: "[data-toggle='map']",
 *   coordinates: {
 *     lat: 59.938801,
 *     lng: 30.323078
 *   },
 *   markerCoordinates: {
 *     lat: 59.938801,
 *     lng: 30.323078
 *   },
 *   zoom: 16,
 *   marker: "../images/marker.png"
 * });
 */
function GoogleMap( options ) {

  if ( ! document.querySelector( options.container ) ) {
    return;
  }

  // Append the wrapper
  window.addEventListener("DOMContentLoaded", function() {
    var wrapper = document.createElement("div");

    wrapper.id = "map";

    wrapper.style.cssText = "width: 100%; height: 100%";

    document.querySelector( options.container ).appendChild( wrapper );
  });

  // Insert & execute the script
  window.addEventListener("DOMContentLoaded", function() {
    var script = document.createElement("script");

    script.async = "async";

    script.defer = "defer";

    script.src="https://maps.googleapis.com/maps/api/js?key=" + options.key + "&callback=googleMap.init";

    document.body.appendChild( script );
  });

  // Initialize the map
  this.init = function() {

    var element = document.getElementById("map");

    var coordinates = {
      lat: options.coordinates.lat,
      lng: options.coordinates.lng
    };

    var zoom = options.zoom;

    var map = new google.maps.Map(element, {
      center: coordinates,
      zoom: zoom,
      scrollwheel: false,
      disableDefaultUI: true
    });

    var markerCoordinates = {
      lat: options.markerCoordinates.lat,
      lng: options.markerCoordinates.lng
    };

    var markerImage = options.marker;

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

    map.setOptions({styles: options.styles});
  }
}