Create VueJS application with Google Map

In this article, we will learn the steps to make a VueJS application that uses some features of Google Map such as searching addresses, displaying a list of 1 store in the area on the map, Show store details on a map.

Frontend will use VueJS, and the API will use Ruby on Rails.

1. Install the Rails API

Start initializing the Rails project:

mkdir map_shop && cd map_shop 
rails new backend --api -d mysql

Because the Rails app and the VueJs app will be hosted on two separate servers, the first thing we need to handle is CORS (Cross-Origin Resource Sharing). In Rails, we find the following file config / initialzers / cors.rb and edit the file as follows:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
 
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Next is to add the gem gem “rack-cors”and runbundle install

Create a Shop model containing basic information such as name, longitude, and latitude

rails generate scaffold Shops name:string address:string 'latitude:decimal{11,8}' 'longitude:decimal{11,8}'

#create database 
rake db:create
rake db:migrate

Thus, we have the Shop model, and our generated routes.rb file will resourse

Rails.application.routes.draw do
  resources :shops 
end

In the shop controller, we define the basic action index

def index
  @shops = Shop.all
 
  render json: @shops
end

Check api has worked, we create a shop data

Shop.create!(name: '', latitude: '21.0133334', longitude: '105.7778877', address: 'Ho Guom')

Run rails sto start the server and then click on the link localhost:3000/shops, it will display all the shops. So the API is OK.

2. Install VueJS

We will create a separate frontend folder to contain the VueJS code, using the tool vue-clito create it.


165/5000
cd map_shop


# if you have not installed vue-cli yet
npm install -g vue-cli

# initialize project frontend
vue init webpack frontend

# run frontend
cd frontend && npm run dev

Visit the link localhost:8080to enter Vue’s original interface

This is image title

Install the router if you didn’t add it when initializing

npm install vue-router

Install the Google Map API
To use Google Map, you need an API key generated by Google. You go to the tutorial page to get the key. With API key, we can use all Google services, as long as we pay for the service we need. There is currently a Google program offering $ 300 per user account for 1 year, so this is an opportunity for us to learn about Google services.

Here, we need to solve the problem of searching for an address in Google Map, so it is necessary to activate the service Maps JavaScript APIand Places APIin the list of services that Google provides, so that we can use Google Map to solve the above problems.

Add a library vue2-google-mapsto use google map in VueJS

npm install vue2-google-maps

In the src / main.js file on the frontend, we add config:

import * as VueGoogleMaps from "vue2-google-maps"

Vue.use(VueGoogleMaps, {
  load: {
    key: GOOGLE-API-KEY,
    libraries: "places"
  }
});

Thus, finished integrating google map into VueJS.

4. Create a Shop

Create the shop creation API in the backend:

# API create shop: POST /shops
def create 
  shop = Shop.new shop_params
 
 if shop.save 
    render json: {success: true}
 else
     render json: {errors: shop.errors.full_messages}, status: :unprocessable_entity
 end
end

private

def shop_params
  params.permit :name, :latitude, :longitude, :address
end

Form creates a shop inside Vue, creates file /src/CreateShop.vue

<template>
  <div class="--shop">
      <selected-address-google-map-modal
      :selectedAddress="selectedAddress"
      @onSelectedAddress="onSelectedAddress"
    />
    
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <input type="text" v-model="name" name="name" placeholder="Name"
            class="form-control" :class="{ 'is-invalid': submitted && !name }" />
          <div v-show="submitted && !name" class="invalid-feedback">Name is required</div>
        </div>

        <div class="form-group form-group--address">
          <input type="text" v-bind:value="selectedPlace.address"
            placeholder="Please select a place"
            v-on:click="openSelectedAddressModal"
            class="form-control"
          >
        </div>

        <div class="form-group float-right">
          <button class="btn btn-primary">Create</button>
        </div>
      </form>
  </div>
</template>

<script>
  import axios from 'axios'
  import SelectedAddressGoogleMapModal from './SelectedAddressGoogleMapModal'

  export default {
    data () {
      return {
        submitted: false,
        name: '',
        selectedAddress: {
          lat: null,
          lng: null,
          address: ''
        }
      }
    },
    components: { SelectedAddressGoogleMapModal },
    methods: {
      handleSubmit () {
        this.submitted = true;
        const {
          name, selectedAddress           
        } = this;
        
   # request to API to create Shop
        axios.post('http://localhost:3000/shops', {
          name: name,
          latitude: selectedAddress.lat,
          longitude: selectedAddress.lng,
          address: selectedAddress.address 
        })
          .then(response => {
            # Restore form and add alert if needed
            this.name = ''
            this.selectedAddress = {} 
          })
          .catch(e => {
            this.error.push(e)
          })
      },
      openSelectedAddressModal() {
        this.$modal.show('selected-address-google-map-modal');
      },
      onSelectedAddress(address) {
        this.selectedAddress = address;
      },
  };
</script>

We have used Modal to display Map to select the address, to use Modal in VueJS, you add the library vue-js-modalwith npm install and add config in main.js file.

import VModal from 'vue-js-modal'

Vue.use(VModal)

Create Modal showing Map to select the address, we create file /src/SelectedAddressGoogleMapModal.vue

<template>
  <modal name="selected-address-google-map-modal" transition="pop-out" :width="900" :height="600" :reset="true">
    <div class="search-place-map">
      <h2>Search address</h2>
      <div class="d-flex">
        <gmap-autocomplete
          class="form-control"
          @place_changed="setAddress">
        </gmap-autocomplete>
        <button class="btn btn-primary" @click="addAddress">Set Address</button>
      </div>
    </div>
    <br>
    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </modal>
</template>

<script>
export default {
  name: "SelectedAddressGoogleMapModal",
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      selectedAddress: null
    };
  },

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

  methods: {
    setAddress(address) {
      this.selectedAddress = address;
    },
    addAddress() {
      if (this.selectedAddress) {
        const marker = {
          lat: this.selectedAddress.geometry.location.lat(),
          lng: this.selectedAddress.geometry.location.lng()
        };
        this.markers.push({ position: marker });
        this.center = marker;
        this.$emit('onSelectedAddress', {
          lat: marker.lat,
          lng: marker.lng,
          address: this.selectedAddress.formatted_address
        })
        this.onSelectedAddress = null;
      }
    },
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    }
  }
};
</script>

Modal components are used

gmap-autocomplete: allows displaying the list of address suggestions when typing
gmap-map: show map
gmap-marker: shows selected locations
The command this.$emit('onSelectedAddress', data)is a method to call back the parent component, here is to update the selected address.

Thus, we have created a shop with lat, lng selected from the map.

5. Display the list of shops in the Map

Suppose, the user wants to display a list of shops in a certain area, like

then we do the following:

First, we need to create an API to return the list of shops in an area, so that we can filter shops in the area, we will rely on searching for latitude and longitude. The idea is to query in the DB to get all shops located in a rectangular box of a part of the map currently displayed, each corner of the rectangle will be created latitude, longitude.

def index  
  shops = Shop.all.where(
    "latitude >= ? AND latitude <= ? AND longitude >= ? AND longitude <= ?",
      params[:bottom_x], params[:top_x], params[:bottom_y], params[:top_y]
  )
 
 render json: shops
end

where the parameters bottom_x, top_x, bottom_y, top_y are the latitude and longitude values of the first 4 corners of the map in the xy coordinate direction

We create Component to display the shop listing in the map: / src / MapShops

<template>
  <div class="section-box map-search">
     <h4 class="section-box__heading">MAP</h4>
    <gmap-map
      ref="mapRef"
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
      @idle="searchShopsInMap"
    >
      <gmap-marker
        :key="index"
        v-for="(shop, index) in shops"
        :position="shop.position"
      ></gmap-marker>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'MapShops',
    data() {
      return {
        center: { lat: 35.652832, lng: 139.839478 },
        boundMap: {},
        shops: [] 
      };
    },
    components: { SimpleStatementDetail },
    mounted() {
      this.geolocate();
    },
    methods: {
      geolocate() {
        navigator.geolocation.getCurrentPosition(position => {
          this.center = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
        });
      },
      searchShopsInMap() {
        const map = this.$refs.mapRef;
       
        const boundCoordinate = this.$refs.mapRef.$mapObject.getBounds();

        if(!boundCoordinate){return}
        const northEast = boundCoordinate.getNorthEast();
        const southWest = boundCoordinate.getSouthWest();
        const lats = [northEast.lat(), southWest.lat()];
        const lngs = [northEast.lng(), southWest.lng()];

        this.boundMap = {
          top_x: _.max(lats),
          bottom_x: _.min(lats),
          top_y: _.max(lngs),
          bottom_y: _.min(lngs)
        }

        axios.get('http://localhost:3000/shops')
          .then(response => {
            this.shops = response.data.map(shop => {
              return {
                 ...shop, position: {
                   lat: shop.latitude, lng: shop.longitude
                 }
              }
            }) 
          })
          .catch(e => {
            this.error.push(e)
          })
      }
    }
  };
</script>

where the idlegmap-map event is called after we have moved the map to another area, then we will calculate the coordinates of the frame and call the API to return the shops in that new area. .

6. Combining components into the App

We added component to create shop and display shop in map /src/App.vue file to display

<template>
  <div id="app">
    <div class="create-shop">
       <create-shop />
    </div>
    
    <div class="list-shop-in-map">
       <map-shops />
    </div>
  </div>
</template>

<script>

import MapShops from './MapShops'
import CreateShop from './CreateShop'

export default {
  name: 'app',
  components: {
    MapShops, CreateShop
  }
}
</script>

Conclude

Above are the steps to build a VueJS app that uses Rails as an API, and in conjunction with Google map, allows easy integration of information into the map.

We can further improve the use vuexof state management, which helps solve the case when the shop is finished, will be able to immediately show that shop in the map containing the shop list. And add the shop information display when clicking on a marker in the map using gmap-info-window.

Thanks for watching.

#vuejs #javascript #vue-js

What is GEEK

Buddha Community

Create VueJS application with Google Map

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

The built-in interactive_console.py tool (if you already have a consumer key & secret)
The Tumblr API console at https://api.tumblr.com/console
Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

state - a string, the state of the post. Supported types are published, draft, queue, private
tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
date - a string, the customized GMT that you want
format - a string, the format that your post is in. Support types are html or markdown
slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

title - a string, the title of post that you want. Supports HTML entities.
url - a string, the url that you want to create a link post for.
description - a string, the desciption of the link that you have

#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api

Mitchel Carter

1603627200

Google Maps Location Sharing Not Updating

In this blog post, I will discuss how to fix google maps location sharing not updating or not working and also will unable to refresh Google maps sharing location issues. By using Google location sharing features you can choose who can find your current location for what length of time. It is important to show the updated location that you can share with your family or friends so that they can receive you or show you the right path to access at your right location simply.

You may also like How to get current location in Google Maps

Why is Google Maps Location Sharing Not Updating?

In our day to day life, we use it a lot to find places, explore businesses, and share locations with friends. However, In addition to these, sometimes Google maps also experience one major issue that is “Google maps location sharing not working”. Find the below list of solutions to resolve the issue:-

Solution 1: Check your Wi-Fi or Cellular Signal

Make sure that you have the proper internet connection available on a device that you are using to use Google Maps. You can also switch to the cellular data from your Wi-Fi connection.

Solution 2: Update Google Maps app

Using an outdated Google Maps app version may cause plenty of technical issues and you can easily resolve this issue after updating your app to the latest version.

Solution 3: Restart your device

It is one of the best solutions to resolve all kinds of Google Maps related issues. You can easily access the Google Maps app after restarting your preferred device.

Why can’t I refresh someone’s location on Google Maps?

It’s another issue among the users that Google Maps stopped location sharing refreshing. There could be plenty of reasons for this problem. Some of the most common issues of this problem listed below:-

Improper internet connectivity.
Outdated app version.
Caches and data.
Compatibility issues.
Using the incompatible device.
Network connection issues.
Calibration issues.

References: How to share real-time location with others

Conclusion

I hope you liked this article on Why google maps location sharing not updating, and google maps location sharing not working. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

#google maps api #google maps location sharing not updating #google maps location sharing not working #google maps location sharing unable to refresh

Chandler Erdman

1603991820

Google Maps Draggable Marker Get Coordinates

In this blog post, you will learn how to create google maps draggable marker using Google Maps Javascript API v3, and when you drag the marker position then get coordinates (latitude and longitude) of that location where you place the marker.

Keep reading on Google Maps Location Sharing Not Updating, How to show multiple locations on Google Maps

How to make a marker draggable?

To allow users to drag a marker to a different location on the map, set the draggable attribute to true in the marker options.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

#google maps api #javascript #draggable marker google maps v3 example #google maps draggable marker #google maps draggable marker get coordinates

Machine Learning in Rust

1619247660

Google's TPU's being primed for the Quantum Jump

The liquid-cooled Tensor Processing Units, built to slot into server racks, can deliver up to 100 petaflops of compute.

As the world is gearing towards more automation and AI, the need for quantum computing has also grown exponentially. Quantum computing lies at the intersection of quantum physics and high-end computer technology, and in more than one way, hold the key to our AI-driven future.

Quantum computing requires state-of-the-art tools to perform high-end computing. This is where TPUs come in handy. TPUs or Tensor Processing Units are custom-built ASICs (Application Specific Integrated Circuits) to execute machine learning tasks efficiently. TPUs are specific hardware developed by Google for neural network machine learning, specially customised to Google’s Machine Learning software, Tensorflow.

The liquid-cooled Tensor Processing units, built to slot into server racks, can deliver up to 100 petaflops of compute. It powers Google products like Google Search, Gmail, Google Photos and Google Cloud AI APIs.

#opinions #alphabet #asics #floq #google #google alphabet #google quantum computing #google tensorflow #google tensorflow quantum #google tpu #google tpus #machine learning #quantum computer #quantum computing #quantum computing programming #quantum leap #sandbox #secret development #tensorflow #tpu #tpus

Sahil Kataria

1598605747

Steps for Preparing Ads for your PPC Campaign using Google Adwords

Read the blog to get aware about the Steps required for Preparing Ads for your PPC Campaign using Google Adwords that will help to make you more money.

#learn google ads #steps to create google ads #google ads strategy #how to create google ads #tips for creating google ads