Author: John Au-Yeung

Sometimes, we want to display multiple Google Maps per page with API V3 and JavaScript.

In this article, we’ll look at how to display multiple Google Maps per page with API V3 and JavaScript.

How to display multiple Google Maps per page with API V3 and JavaScript?

To display multiple Google Maps per page with API V3 and JavaScript, we load each map on a different element.

For instance, we write

<div
  id="map_canvas"
  style="width: 700px; height: 500px; margin-left: 80px"
></div>
<div
  id="map_canvas2"
  style="width: 700px; height: 500px; margin-left: 80px"
></div>

to add 2 divs for 2 maps.

Then we write

let map;
let map2;

const initialize = (condition) => {
  const myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
};

to call the Map constructor with each div and myOptions to load the maps in the initialize function.

Conclusion

To display multiple Google Maps per page with API V3 and JavaScript, we load each map on a different element.

Sometimes, we want to take keyboard input in JavaScript.

In this article, we’ll look at how to take keyboard input in JavaScript.

How to take keyboard input in JavaScript?

To take keyboard input in JavaScript, we listen to the keydown event.

For instance, we write

document.addEventListener("keydown", (event) => {
  if (event.keyCode === 37) {
    console.log("Left was pressed");
  } else if (event.keyCode === 39) {
    console.log("Right was pressed");
  }
});

to listen for the keydown event on the document with addEventListener.

We listen for key presses on the whole page.

In it, we check the keyCode value.

If it’s 37, then the left arrow is pressed.

And if it’s 38, then the right arrow is pressed.

Conclusion

To take keyboard input in JavaScript, we listen to the keydown event.

Sometimes, we want to fix JavaScript getTime() is not a function error.

In this article, we’ll look at how to fix JavaScript getTime() is not a function error.

How to fix JavaScript getTime() is not a function error?

To fix JavaScript getTime() is not a function error, we should make sure we’re calling getTime on date objects.

For instance, we write

const res = new Date(dat1).getTime() > new Date(dat2).getTime();

so that we’re calling getTime on 2 date objects to compare their timestamps.

Conclusion

To fix JavaScript getTime() is not a function error, we should make sure we’re calling getTime on date objects.

Sometimes, we want to set a cookie to expire in 1 hour in JavaScript.

In this article, we’ll look at how to set a cookie to expire in 1 hour in JavaScript.

How to set a cookie to expire in 1 hour in JavaScript?

To set a cookie to expire in 1 hour in JavaScript, we set the expires parameter on the cookie.

For instance, we write

const now = new Date();
const time = now.getTime() + 3600 * 1000;
now.setTime(time);
document.cookie =
  "username=" + value + "; expires=" + now.toUTCString() + "; path=/";

to get the current datetime with the Date constructor.

Then we get its timestamp in milliseconds with getTime and add 3600 seconds to it.

3600 seconds is an hour.

Then we call setTime to set time as its new timestamp.

Next, we set document.cookie to a string that includes expires=" + now.toUTCString() to set the expiry date of the cookie to an hour.

Conclusion

To set a cookie to expire in 1 hour in JavaScript, we set the expires parameter on the cookie.

Sometimes, we want to prevent multiple clicks on button with JavaScript.

In this article, we’ll look at how to prevent multiple clicks on button with JavaScript.

How to prevent multiple clicks on button with JavaScript?

To prevent multiple clicks on button with JavaScript, we disable it after the first click.

For instance, we write

<form>
  <input />
  <button
    onclick="this.disabled = true; this.value = 'Submitting...'; this.form.submit();"
  >
    submit
  </button>
</form>

to set the onclick attribute of the button in the form to this.disabled = true; this.value = 'Submitting...'; this.form.submit(); to disable the button with this.disabled = true;

We set the button’s text to Submitting… with this.value = 'Submitting...'.

Then we submit the form that the button is in with this.form.submit();.

Conclusion

To prevent multiple clicks on button with JavaScript, we disable it after the first click.