• About Us
  • Contact Us
  • Privacy Policy
NSR-TECH
No Result
View All Result
  • Login
No Result
View All Result
NSR-TECH
No Result
View All Result
Home Mobile Development

Quasar Google maps with places

nsr by nsr
October 7, 2020
in Mobile Development, Quasar, Quasar, Web Development
0
quasar google maps

quasar google maps

0
SHARES
221
VIEWS
Share on FacebookShare on Twitter

Quasar Google maps Javascript API with Places

Hello friends! in this article I am going to show you how to add Google Maps to your quasar app along with Google maps Javascript API and Google Maps Places API. So when you need to built an app with a registration form or for an ecommerce site the Google maps are mostly important. There are many other APIs which provide the maps selection, But one of the famous API is Google maps. So rather than adding all the locations to the database and fetching to a dropdown (basically, it is hard if your site is open for all people in world), You can use a Maps API to get their locations easily.

So lets get start. Before we going to development we have some sort of thing to be done in order to integrate the API to our quasar project. Follow below steps.

READ ALSO

Enable CORS on Lumen API

Quasar multiple file upload with laravel API

First of all you have to enable and create an API key to your project. If you are beginner you can go to following link and check how to generate the API key for Google Maps Javascript API

https://developers.google.com/maps/documentation/javascript/get-api-key

If you are already done that or followed the above documentation, you might have enabled the Google Maps Javascript API and generated a API key.

Now along with that you have to enable Google Maps Places API too. This is important to give the user a dropdown with all places available in the Google maps.

Ok. Now we can move to the development part. I assure that you have created new Quasar project.

Development

Now you have to add the plugins to quasar project. Go to the quasar root folder and open with CMD and add following plugins.

If you using yarn
yarn add vue-browser-geolocation

if you using NPM
npm install vue-browser-geolocation
If you using yarn
yarn add vue2-google-maps

if you using NPM
npm install vue2-google-maps

So you might see a file called index.tempate.html in quasar file directory. Go to the file and put this JS file in head section

<script async defer src="https://maps.googleapis.com/maps/api/js?key=your-api-key-here"></script>

Now create a new page or component (its your wish) and create the template as following.

<template>
 <div>
    <div>
      <h2>Search location</h2>
      <label>
        <gmap-autocomplete
          @place_changed="setLocation">
        </gmap-autocomplete>
        <button @click="markLocation">Add</button>
      </label>
      <br/>

    </div>
    <br>
    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(n, index) in markers"
        :position="n.position"
        @click="center=n.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>

All right. Now we set our page template. Now we have to add the scripts in order to run the Google Maps


<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "your-api-key-here",
    libraries: "places" // necessary for places input
  }
});

export default {
  name: "QuasarGoogleMap",
  data() {
    return {
      //You can change default center position
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      currentPlace: null
    };
  },

  mounted() {
    this.getGeoLocation();
  },

  methods: {
    // receives the place from the autocomplete input
    setLocation(place) {
      this.currentPlace = place;
    },
    markLocation() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng()
        };
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.currentPlace = null;
        
      }
    },
    getGeoLocation: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });

      
    }
  }
};
</script>

Thats it!! if you have any question please comment below. If you need to see my other post go to below link.

Check the latest posts

Related Posts

Enable CORS on Lumen API
Laravel

Enable CORS on Lumen API

February 6, 2021
Quasar multiple file upload with laravel API
Laravel

Quasar multiple file upload with laravel API

January 21, 2021
Laravel Specified Key Was Too Long Fix
Laravel

Laravel Specified Key Was Too Long Fix

January 19, 2021
MySQL you do not have the super privilege issue fix
Tricks

MySQL you do not have the super privilege issue fix

January 19, 2021
how to seo vue.js site
Quasar

how to SEO vue.js site

January 10, 2021
Vue pagination with Laravel
Vue

Vue pagination with Laravel

October 10, 2020
Next Post
Vue pagination with Laravel

Vue pagination with Laravel

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

POPULAR POSTS

quasar-file-upload-img

Quasar file upload process with laravel API

January 21, 2021
lumen framework tutorial

Lumen framework tutorial for beginners

October 24, 2020

Run cordova without android studio

September 12, 2020
quasar google maps

Quasar Google maps with places

October 7, 2020
MySQL you do not have the super privilege issue fix

MySQL you do not have the super privilege issue fix

January 19, 2021

EDITOR'S PICK

Recover desktop in Linux

Recover desktop in Linux

October 18, 2020
increase intel hd graphcs

Increase intel hd graphics

September 27, 2020
website technologies

Website Technologies

November 24, 2020
Upgrade PHP from 7.2 to 7.3 on Ubuntu OS

Upgrade PHP from 7.2 to 7.3 on Ubuntu OS

February 8, 2021

About

Nsrtech is a blog which brings you high quality and valuable articles to your life. All articles will be on different categories which all peoples can solve their issues in a single blog site.

Follow us

Categories

  • Laravel
  • Mobile Development
  • Networking Lessons
  • Others
  • Quasar
  • Quasar
  • Software Guides
  • Theories
  • Tricks
  • Vue
  • Web Development
  • Web Development Lessons

Recent Posts

  • Upgrade PHP from 7.2 to 7.3 on Ubuntu OS
  • Enable CORS on Lumen API
  • Quasar multiple file upload with laravel API
  • Git branch not showing in Visual Studio Code fix
  • Home
  • About Us
  • Contact Us
  • Privacy Policy

© 2020 NSR-TECH Blog .

No Result
View All Result
  • Homepages
    • Home Page 1
    • Home Page 2

© 2020 NSR-TECH Blog .

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In