Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery animate height not working in google map control

I’m trying to create my own control for Google maps v3. When the control button is clicked, it moves the map div higher on the page and expands the map height. (Yes, this is similar to Google map’s fullscreen functionality, but my map is pinned to the bottom of the page with ScrollTrigger and when the user clicks the minimize button, the map disappears. So I’m making my own control to handle where I want the map to appear when it’s minimized.)

Here is a link to my demo:
https://newsinteractive.post-gazette.com/.demo/test.php

The code for the customized control is:

function createexpandControl(map) {
      const controlButton = document.createElement("button");

      // Set CSS for the control.
      controlButton.style.backgroundColor = "#fff";
      controlButton.style.border = "2px solid #fff";
      controlButton.style.borderRadius = "3px";
      controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
      controlButton.style.color = "rgb(25,25,25)";
      controlButton.style.cursor = "pointer";
      controlButton.style.fontFamily = "Arial,sans-serif";
      controlButton.style.fontSize = "16px";
      controlButton.style.lineHeight = "38px";
      controlButton.style.margin = "8px 0 22px";
      controlButton.style.padding = "0 5px";
      controlButton.style.textAlign = "center";
      controlButton.textContent = "Expand Map";
      controlButton.title = "Click to expand the map";
      controlButton.type = "button";
      // Setup the click event listeners
      controlButton.addEventListener("click", () => {
        
        $( "#map" ).animate({
            'height': '+=800px', //this does not work
            'top': '25vh', //this works
            'left': '0' //this works
          }, 1000);
        });
      return controlButton;
    }

Animating the width works, but not the height. I have tried setting 'height': '800px' but that also doesn’t work.

Does anyone have any suggestions please?

Tags:

2

Answers


  1. 0

    Upon inspecting the demo, I found that the #map wrapper div has a max-height set to 210px, which restricts the height from expanding. Here is the updated script:

    controlButton.addEventListener("click", () => {
    $("#map").css("max-height", "none");

    $( "#map" ).animate({
        'height': '+=800px',
        'top': '25vh',
        'left': '0'
      }, 1000);
    });
  return controlButton;
}
    Login or Signup to reply.
  2. 0

    It’s a lot easier to mess with the map properties if you do it via the extended component library, made by UNPKG (https://github.com/googlemaps/extended-component-library/blob/main/src/store_locator/README.md)

    I’ve made a demo project that animates the map height using jquery with the following code:

    $(document).ready(function(){
  $("#btn-retract").hide();
  $("#btn-expand").click(function(){
    $("#btn-expand").hide();
    $("#btn-retract").show();
    $("gmpx-store-locator").animate({'height': '100%'});
    //$("gmpx-store-locator").height("100%");
  });
  $("#btn-retract").click(function(){
    $("#btn-expand").show();
    $("#btn-retract").hide();
    $("gmpx-store-locator").animate({'height': '40%'});
    //$("gmpx-store-locator").height("40%");
  });
});

    For the full demo project: https://github.com/JonasBezzubovas/gmpx-map-demo
    Feel free to clone it and change the API key (obviously) as well as the Map ID.

    Alternatively, I reccomend you just set up a new map using Google’s Quick Builder https://mapsplatform.google.com/resources/quick-builder/ and copy the jquery code above ^^ (quick builder lets you put in a list of "Location" objects that will show up as a panel on the left side of the map, also gives you options to specify the central point, add pins and set the size and position).

    Hoope this helps 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search