V
V
Valentin Popov2016-11-22 11:27:03
JavaScript
Valentin Popov, 2016-11-22 11:27:03

How can I make the map display in full?

I use the plugin github.com/marioestrada/jQuery-gMap to display maps
Where in the code of this plugin to put the event google.maps.event.trigger(map, 'resize'); so that the map is displayed in full, and not just a piece in the left corner.
8a0f5d5d23ba4ba88f9cd39e81fe82ab.jpg
Plugin code:

(function($, undefined) {
  "use strict";

  // Main plugin function
  $.fn.gMap = function(options, methods_options) {
    var $this, args;
    //Asynchronously load Maps API
    if ( (!window.google || !google.maps) && !window.google_maps_api_loading) {
      $this = this;
      args = arguments;
      var cb = 'callback_' + Math.random().toString().replace('.', '');

      window.google_maps_api_loading = cb;

      window[cb] = function() {
        $.fn.gMap.apply($this, args);
        $(window).trigger('google-maps-async-loading');
        window[cb] = null;
        try {
          delete window[cb];
        } catch(e) {}
      };

      var key = window.WPV_FRONT && window.WPV_FRONT.gmap_api_key ? '&key=' + WPV_FRONT.gmap_api_key : '';

      $.getScript(location.protocol + '//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=' + cb + key);
      return this;
    } else if ( (!window.google || !google.maps) && window.google_maps_api_loading) {
      $this = this;
      args = arguments;

      $(window).bind('google-maps-async-loading', function() {
        $.fn.gMap.apply($this, args);
      });

      return this;
    }

    // Optional methods
    switch (options) {
      case 'addMarker':
        return $(this).trigger('gMap.addMarker', [methods_options.latitude, methods_options.longitude, methods_options.content, methods_options.icon, methods_options.popup]);
      case 'centerAt':
        return $(this).trigger('gMap.centerAt', [methods_options.latitude, methods_options.longitude, methods_options.zoom]);
    }

    // Build main options before element iteration
    var opts = $.extend({}, $.fn.gMap.defaults, options);

    // Iterate through each element
    return this.each(function() {
      // Create map and set initial options
      var $gmap = new google.maps.Map(this);

      // Create new object to geocode addresses
      var $geocoder = new google.maps.Geocoder();

      // Check for address to center on
      if (opts.address) {
        // Get coordinates for given address and center the map
        $geocoder.geocode({
          address: opts.address
        }, function(gresult) {
          if (gresult && gresult.length) $gmap.setCenter(gresult[0].geometry.location);
        });
      } else {
        // Check for coordinates to center on
        if (opts.latitude && opts.longitude) {
          // Center map to coordinates given by option
          $gmap.setCenter(new google.maps.LatLng(opts.latitude, opts.longitude));
        } else {
          // Check for a marker to center on (if no coordinates given)
          if ($.isArray(opts.markers) && opts.markers.length > 0) {
            // Check if the marker has an address
            if (opts.markers[0].address) {
              // Get the coordinates for given marker address and center
              $geocoder.geocode({
                address: opts.markers[0].address
              }, function(gresult) {
                if (gresult && gresult.length > 0) $gmap.setCenter(gresult[0].geometry.location);
              });
            } else {
              // Center the map to coordinates given by marker
              $gmap.setCenter(new google.maps.LatLng(opts.markers[0].latitude, opts.markers[0].longitude));
            }
          } else {
            // Revert back to world view
            $gmap.setCenter(new google.maps.LatLng(34.885931, 9.84375));
          }
        }
      }
      $gmap.setZoom(opts.zoom);

      // Set the preferred map type
      $gmap.setMapTypeId(google.maps.MapTypeId[opts.maptype]);

      // Set scrollwheel option
      var map_options = {
        scrollwheel: opts.scrollwheel,
        disableDoubleClickZoom: !opts.doubleclickzoom
      };
      // Check for map controls
      if (opts.controls === false) {
        $.extend(map_options, {
          disableDefaultUI: true
        });
      } else if (opts.controls.length !== 0) {
        $.extend(map_options, opts.controls, {
          disableDefaultUI: true
        });
      }

      $gmap.setOptions($.extend(map_options, opts.custom));

      // Create new icon
      var gicon = new google.maps.Marker();

      // Set icon properties from global options
      var marker_icon = new google.maps.MarkerImage(opts.icon.image);
      marker_icon.size = new google.maps.Size(opts.icon.iconsize[0], opts.icon.iconsize[1]);
      marker_icon.anchor = new google.maps.Point(opts.icon.iconanchor[0], opts.icon.iconanchor[1]);
      gicon.setIcon(marker_icon);

      if (opts.icon.shadow) {
        var marker_shadow = new google.maps.MarkerImage(opts.icon.shadow);
        marker_shadow.size = new google.maps.Size(opts.icon.shadowsize[0], opts.icon.shadowsize[1]);
        marker_shadow.anchor = new google.maps.Point(opts.icon.shadowanchor[0], opts.icon.shadowanchor[1]);
        gicon.setShadow(marker_shadow);
      }

      // Bind actions
      $(this).bind('gMap.centerAt', function(e, latitude, longitude, zoom) {
        if (zoom) $gmap.setZoom(zoom);

        $gmap.panTo(new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude)));
      });

      var last_infowindow;
      $(this).bind('gMap.addMarker', function(e, latitude, longitude, content, icon, popup) {
        var glatlng = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));

        var gmarker = new google.maps.Marker({
          position: glatlng
        });

        if (icon) {
          marker_icon = new google.maps.MarkerImage(icon.image);
          marker_icon.size = new google.maps.Size(icon.iconsize[0], icon.iconsize[1]);
          marker_icon.anchor = new google.maps.Point(icon.iconanchor[0], icon.iconanchor[1]);
          gmarker.setIcon(marker_icon);

          if (icon.shadow) {
            marker_shadow = new google.maps.MarkerImage(icon.shadow);
            marker_shadow.size = new google.maps.Size(icon.shadowsize[0], icon.shadowsize[1]);
            marker_shadow.anchor = new google.maps.Point(icon.shadowanchor[0], icon.shadowanchor[1]);
            gicon.setShadow(marker_shadow);
          }
        } else {
          gmarker.setIcon(gicon.getIcon());
          gmarker.setShadow(gicon.getShadow());
        }

        if (content) {
          if (content === '_latlng') content = latitude + ', ' + longitude;

          var infowindow = new google.maps.InfoWindow({
            content: opts.html_prepend + content + opts.html_append
          });

          google.maps.event.addListener(gmarker, 'click', function() {
            if(last_infowindow)
              last_infowindow.close();
            infowindow.open($gmap, gmarker);
            last_infowindow = infowindow;
          });

          if(popup)
            infowindow.open($gmap, gmarker);
        }
        gmarker.setMap($gmap);
      });

      var addMarker = function(marker, $this) {
        return function(gresult) {
          // Create marker
          if (gresult && gresult.length > 0) {
            $($this).trigger('gMap.addMarker', [gresult[0].geometry.location.lat(), gresult[0].geometry.location.lng(), marker.html, marker.icon, marker.popup]);
          }
        };
      };

      // Loop through marker array
      for (var j = 0; j < opts.markers.length; j++) {
        // Get the options from current marker
        var marker = opts.markers[j];

        // Check if address is available
        if (marker.address) {
          // Check for reference to the marker's address
          if (marker.html === '_address') marker.html = marker.address;

          // Get the point for given address
          var $this = this;
          $geocoder.geocode({
            address: marker.address
          }, (addMarker)(marker, $this));
        } else {
          $(this).trigger('gMap.addMarker', [marker.latitude, marker.longitude, marker.html, marker.icon, marker.popup]);
        }
      }
    });

  };
  

  // Default settings
  $.fn.gMap.defaults = {
    address: '',
    latitude: 0,
    longitude: 0,
    zoom: 1,
    markers: [],
    controls: [],
    scrollwheel: false,
    doubleclickzoom: true,
    resize = false,
    maptype: 'ROADMAP',
    html_prepend: '<div class="gmap_marker">',
    html_append: '</div>',
    icon: {
      image: "https://www.google.com/mapfiles/marker.png",
      shadow: "https://www.google.com/mapfiles/shadow50.png",
      iconsize: [20, 34],
      shadowsize: [37, 34],
      iconanchor: [9, 34],
      shadowanchor: [6, 34]
    }
  };

})(jQuery);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question