In this example, you’re going to learn how to draw a polygon on the Google Maps canvas.

Declare the Map Object

<div id="map"></div>
<style>
  #map {
    height: 100%;
  }
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">
<script>
var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 16,
     center: new google.maps.LatLng(51.173791, 9.327271),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });
</script>

By default, the map has “for development purpose only” watermark on it. You can remove it by adding an API Key in the library URL. You can find how to create it here.

Define the LatLng Coordinates for the Polygon’s Path

var polygoneCoords = [
     {lat: 51.177329, lng: 9.321499}…

Directions Service

The Directions Service is a client-side JavaScript library that lets us get directions data between two locations based on travel mode such as driving, walking, etc.

The Directions Service talks to Google Maps API behind the scene that takes direction requests such as origin, destination, travel mode and returns the efficient directions path data including multi-part directions.

Enable Directions API library

First, make sure that the Directions API library is enabled on the Google Cloud Console.

Include Maps JavaScript Library

Also, make sure to include the google maps client-side library in the project.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">

Make A Request To Directions Service

Create an instance of the DirectionsService Object.

const directionsService = new google.maps.DirectionsService();

Call…

In this tutorial, you’re going to learn how to get up and running with the Vue 3 project from scratch with step-by-step instructions.

1. Install Node.js & NPM package
2. Install Vue CLI 4.5 or higher
3. Create A Vue 3 Project
4. Run Vue 3 Web App

1. Install node.js & npm package

The first step is to install Node.js & NPM (Node Package Manager) on your computer.

You can check to see if they’re already installed by going to the Terminal/Command prompt window on your computer and running a couple of commands.

To check the installed version of node js,

node -v

If you already have it installed…

Sometimes we need to move an input field that is bound to a reactive variable from a parent component to its own component for reusability purposes without losing its reactivity.

In the below parent component, the input field is bound to a variable name using ref() object.

You can get Up and Running With Vue JS 3 Project Using Vue CLI [2021] if you’ve not already.

Parent.vue

<template>
    Parent: {{name}}
    <input type="text" placeholder="Name" v-model="name"/>
</template><script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("");
    return { name };
  },
};
</script>

When you…

When working with any type of form, we want to quickly do the client-side validation on the submit button to make sure all the expected fields have valid input for a better user experience.

Let’s see how to validate the submit button state in this short tutorial.

Want to learn how to implement client-side form validation functionality in Vue js 3 Composition API for the sign-up and login pages?

Then, you’ve come to the right place!

Before going any further, let’s take a look at what you’re going to learn in this Vue JS 3 Composition API tutorial.

As you can see from the final output below, all of the input fields in the sign-up form have empty check validation as well as additional validation such as email, min length, etc on keyup and blur events.

When all the input fields are filled with no errors, the…

Whenever we have a list of items such as products, it’s obvious to have a search items functionality on the client-side for a better user experience.

In Vue 3 Composition API, we can easily create a search bar using computed properties.

In fact, this is one of the perfect cases for utilizing computed properties.

Let’s say I have a ProductList.vue page-based component that will show a list of products that I want to add search functionality to it.

ProductList.vue

<template>
</template><script>
export default {
  setup() {},
};
</script>

Get Products Data From Firebase

Let’s make an HTTP request to a server to get a…