MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.20

Vueで地図を表示してみよう!!

Vue.js地図表示 メイン画像

みなさん、こんにちは。

マルティスープでは、vuejsを使用したプロジェクトが増えており、vuejsでGoogleMapを表示させる方法をご紹介します。

 

下記のようにhtmlにJavaScrip APIを読み込ませる記述をしていますが、今回はjs-api-loaderを使用したいと思います。

<script src=”https://maps.google.com/maps/api/js?v=3.47&key=xxxxxxxxx”></script>

今回、下記のものをインストールします。画面は、vueのフレームワークとして、vuetifyを使用してみます。※templeteの作成方法は省略させていただきます。

  • ・@vue/cli(5.0.8)
  • ・vuetify 2.x系
  • ・@googlemaps/js-api-loader

 

 

1. vuetifyプロジェクト作成

npm install -g @vue/cli@5.0.8
vue create sample > Default ([Vue 2] babel, eslint)
cd sample
vue add vuetify > Vuetify 2 – Vue CLI (recommended)

作成したプロジェクト内にあるmain.jsを開いて、下記を追記します。

// src/main.js
import Vue from 'vue'
import vuetify from './plugins/vuetify'

new Vue({
  vuetify,
}).$mount('#app')

 

 

2. googlemaps読み込み

まず、loaderをインストールします。

npm i @googlemaps/js-api-loader

作成したプロジェクト内にあるHelloWorld.vueを開いて、template、script内を変更します。

// HelloWorld.vue
<template>
    ・・・
    <v-sheet id="map"
      class="pa-0"
      :light="true"
      style="width: 100%; height: 300px;"
    >
      google map
    </v-sheet>
    ・・・
</template>
<script>
import { Loader } from '@googlemaps/js-api-loader';

export default {
  name: 'HelloWorld',
  
  data : function(){
    return {
      map: null,
      google: null,
      
    }
  },
  
  mounted : function(){
    new Loader({
		apiKey: '(ご自分で利用しているgoogleMapキー)',
		version: 'frozen',
		libraries: ["places", "drawing", "geometry", "visualization"],
		language: 'ja',
    })
    .load()
    .then((google) => {
	    this.google = google;
	    // 地図の初期化
	    this.map = new google.maps.Map(document.getElementById('map'), {
	        // 初期表示設定
	        zoom : 17,
	        center: { lat: 35.692195, lng: 139.759854 },    // マルティスープ本社
	        fullscreenControl: false,
	        mapTypeControl: false,
	        streetViewControl: true,
	        streetViewControlOptions: {
	          position: google.maps.ControlPosition.LEFT_BOTTOM
	        },
	        zoomControl: true,
	        zoomControlOptions: {
	          position: google.maps.ControlPosition.LEFT_BOTTOM
	        },
	        scaleControl: true,
	    });
	    
	    // ↓
	    // こちらにレスポンスとして受け取ったgoogleやthis.mapを使用すれば、
	    // 通常通りvueでもJavaScriptAPIを利用できます。
	    // ↑
	    
    })
    .catch(e => {
      console.error(e);
    });
  },
}
</script>

3. デバッグ

ビルドして、デバッグで起動してみましょう。下記のコマンドをたたいて、エラーが起きなければ、localhost:8080をブラウザで確認してみましょう。

npm run build
npm run serve

 

いかがでしょうか?
vuejsを利用して、簡単に地図を表示できたと思います。

このloaderを利用すれば、vueでもいつも通りの Maps JavaScript API を利用できますね。

 

また、vuetiryやbootstrapなどのフレームワークを利用すれば、簡単にweb画面が作成できます。 興味のある方はコンポーネントを追加・変更してみてください。

vuetifyのワイヤーフレームをもとに作成した画面がこちらです。

 

staticmap4

 

 

みなさんも是非お試しください!!

 

 

バイ!

 

 

 

 

【Vuejs紹介シリーズ】

第2回目「VueでMaterial Design Iconを表示する方法」

第3回目「Vueで住所検索する方法」

第4回目「Vueでcsvファイルの取込結果を地図に表示してみる」

第5回目「地図上の図形にイベントを定義する方法」

第6回目「Vuejs + Chartjsでグラフを表示する」

第7回目「Vuejs +OpenStreetMap表示」

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.02.11

Directions API で巡回セールスマン問題を解決する

みなさん、こんにちは。
今回は、Google Maps Directions API で、巡回セールスマン問題を解決する方法を解説します!・・・

続きを読む

2018.03.31

Googleマップに地域メッシュを描画する

みなさん、こんにちは。

今回は、地域メッシュを Google マップ上に描画してみたいと思います。

地域メッシュは、Wik・・・

続きを読む

2017.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

 - GIS, Google Maps JavaScript API, スタッフ日記