Author: John Au-Yeung

Sometimes, we want to enforce min. zoom level when using fitBounds with Google Maps v3 and JavaScript.

In this article, we’ll look at how to enforce min. zoom level when using fitBounds with Google Maps v3 and JavaScript.

How to enforce min. zoom level when using fitBounds with Google Maps v3 and JavaScript?

To enforce min. zoom level when using fitBounds with Google Maps v3 and JavaScript, we can set the minimum zoom level in the bounds_changed event handler.

For instance, we write

const zoomChangeBoundsListener = google.maps.event.addListener(
  map,
  "bounds_changed",
  (event) => {
    google.maps.event.removeListener(zoomChangeBoundsListener);
    map.setZoom(Math.min(15, map.getZoom()));
  }
);

map.fitBounds(zoomBounds);

to call addListener to listen to the bounds_changed event on the map.

In the event listener, we call map.setZoom to set the zoom level to 15 if the zoom level is below 15.

Otherwise, we use getZoom to return the zoom level and set that as the zoom level of the map.

Conclusion

To enforce min. zoom level when using fitBounds with Google Maps v3 and JavaScript, we can set the minimum zoom level in the bounds_changed event handler.

Sometimes, we want to make a simple image upload using JavaScript and HTML.

In this article, we’ll look at how to make a simple image upload using JavaScript and HTML.

How to make a simple image upload using JavaScript and HTML?

To make a simple image upload using JavaScript and HTML, we can add a file input and img element.

And then we can get the selected file from the file input and show it in the img element.

For instance, we write

<input type="file" /> <br /><img id="myImg" src="#" />

to add the file input and img element.

Then we write

document.querySelector('input[type="file"]').addEventListener("change", (e) => {
  if (e.target?.files?.[0]) {
    const img = document.querySelector("img");
    img.onload = () => {
      URL.revokeObjectURL(img.src);
    };

    img.src = URL.createObjectURL(e.target?.files[0]);
  }
});

to select the file input with querySelector.

And then then we listen for its change event with addEventListener.

In the event listener, we get the file from e.target?.files?.[0].

Then we get the img element with querySelector.

We set the src property of the img element to the URL base64 string that we get by calling createObjectURL with the file object.

Then when the image is loaded, we call revokeObjectURL to clear the resources for creating the URL.

Conclusion

To make a simple image upload using JavaScript and HTML, we can add a file input and img element.

And then we can get the selected file from the file input and show it in the img element.

Sometimes, we want to open a new tab in the background with JavaScript.

In this article, we’ll look at how to open a new tab in the background with JavaScript.

How to open a new tab in the background with JavaScript?

To open a new tab in the background with JavaScript, we can simulate pressing ctrl-click on a link programmatically.

For instance, we write

const a = document.createElement("a");
a.href = "http://www.example.com/";
const evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
  "click",
  true,
  true,
  window,
  0,
  0,
  0,
  0,
  0,
  true,
  false,
  false,
  false,
  0,
  null
);
a.dispatchEvent(evt);

to call createElement to create a link.

We set its href property to the URL we want to go to.

Then we call createEvent to create a mouse event.

And we call initMouseEvent to create a mouse event with the 10th argument set to true to enable pressing ctrl.

Next, we call dispatchEvent with evt to dispatch the mouse event to open the link in the background.

Conclusion

To open a new tab in the background with JavaScript, we can simulate pressing ctrl-click on a link programmatically.