[{"data":1,"prerenderedAt":3259},["ShallowReactive",2],{"en-tag-vue-1":3},{"count":4,"content":5},2,[6,798],{"id":7,"title":8,"body":9,"category":782,"createdAt":784,"description":785,"extension":786,"index":50,"meta":787,"navigation":64,"path":788,"publish":64,"seo":789,"series":790,"seriesTitle":785,"stem":791,"tag":792,"thumbnail":795,"updatedAt":796,"__hash__":797},"en_series\u002Fen\u002Fseries\u002Fconcrete5vue-1.md","Concrete5 + Vue CLI3： Making Rich UI in package. 1st： Set up vue project on Concrete5 package.",{"type":10,"value":11,"toc":769},"minimark",[12,25,28,33,36,118,121,126,129,132,145,148,153,156,160,164,167,175,179,182,188,191,197,203,210,213,218,232,236,242,249,393,399,409,415,600,606,609,616,684,698,704,715,720,747,750,755,758,762,765],[13,14,15,16,20,21,24],"p",{},"Hello everyone. In this post, I explain how to use ",[17,18,19],"strong",{},"Vue.js"," to make rich UI in ",[17,22,23],{},"Concrete5 package",". At there, I write the process that create vue project in C5 package directory and use compiled js file.",[13,26,27],{},"I assumed Readers know how to customize C5 packages and basic C5 knowledge.The C5’s version is 8.4+ in this post.",[29,30,32],"h2",{"id":31},"why-use-vuejs","Why use Vue.js?",[13,34,35],{},"Reason is simple. Because making rich UI with PHP(C5 system) and jquery is so hard.\nC5 prepares helper to print form as below.",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-php shiki shiki-themes material-theme-ocean","\u002F\u002F Read Helper\n$form = Core::make('helper\u002Fform');\n\n\u002F\u002Finput type of text\necho $form->text($name, $default_value);\n\n\u002F\u002Ftext area\necho $form-> textarea($name, $default_value);\n\n\u002F\u002F File manager\n$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\necho $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n","php","",[44,45,46,54,59,66,72,78,83,89,95,100,106,112],"code",{"__ignoreMap":42},[47,48,51],"span",{"class":49,"line":50},"line",1,[47,52,53],{},"\u002F\u002F Read Helper\n",[47,55,56],{"class":49,"line":4},[47,57,58],{},"$form = Core::make('helper\u002Fform');\n",[47,60,62],{"class":49,"line":61},3,[47,63,65],{"emptyLinePlaceholder":64},true,"\n",[47,67,69],{"class":49,"line":68},4,[47,70,71],{},"\u002F\u002Finput type of text\n",[47,73,75],{"class":49,"line":74},5,[47,76,77],{},"echo $form->text($name, $default_value);\n",[47,79,81],{"class":49,"line":80},6,[47,82,65],{"emptyLinePlaceholder":64},[47,84,86],{"class":49,"line":85},7,[47,87,88],{},"\u002F\u002Ftext area\n",[47,90,92],{"class":49,"line":91},8,[47,93,94],{},"echo $form-> textarea($name, $default_value);\n",[47,96,98],{"class":49,"line":97},9,[47,99,65],{"emptyLinePlaceholder":64},[47,101,103],{"class":49,"line":102},10,[47,104,105],{},"\u002F\u002F File manager\n",[47,107,109],{"class":49,"line":108},11,[47,110,111],{},"$file_selector = Core::make('helper\u002Fconcrete\u002Ffile_manager');\n",[47,113,115],{"class":49,"line":114},12,[47,116,117],{},"echo $file_selector->file('label', 'name_attr', 'Select Photo', $default_fileObj);\n",[13,119,120],{},"When I write them on page view.php, forms are shown as below.",[122,123],"image-render",{":src":124,":width":125},"'_mix\u002Fformhelpertest-768x272.png'","'100%'",[13,127,128],{},"Input text, textarea and C5’s file manager appeared. These has name property and can post data.",[13,130,131],{},"Simply forms are enough to use them. But,",[133,134,135,139,142],"ul",{},[136,137,138],"li",{},"Implication of front-end validation",[136,140,141],{},"Repeatable form",[136,143,144],{},"Dependency Forms (There are some patterns correspond to inputed value)",[13,146,147],{},"These implication is hard with only jquery and PHP.",[149,150,152],"h3",{"id":151},"lets-use-vuejs-power","Let’s use vue.js power",[13,154,155],{},"Many Rich Form’s UI are developed easily with Vue.js, React.js and backbone.js( which manage data state and HTML template by javascript.) Using those libraries, we can develop rich UI while reducing the number of development days.",[29,157,159],{"id":158},"preparation-of-creating-package","Preparation of creating package",[149,161,163],{"id":162},"create-a-dedicated-directory-for-package","Create a dedicated directory for package",[13,165,166],{},"Let’s make package has UI built by vue. Create custom package directory named ‘vuetest’ under \u002Fpackage . Directory structure as below.",[37,168,173],{"className":169,"code":171,"language":172},[170],"language-text","documentroot $ cd .\u002Fpackage\npackage $ mkdir vuetest && touch ...\npackage $ tree vuetest\n.\u002F\n└── vuetest\n    ├── controller.php\n    ├── controllers\n    │   └── single_page\n    │       └── dashboard\n    │           └── vuetest.php\n    ├── db.xml\n    ├── icon.png\n    ├── js\n    │\n    └── single_pages\n        └── dashboard\n            └── vuetest\n                └── view.php\n","text",[44,174,171],{"__ignoreMap":42},[149,176,178],{"id":177},"create-vue-project","Create Vue project",[13,180,181],{},"Under package\u002Fvuetest, there are package controller file, single page file that shows UI. Then let’s create js directory and make vue project there, named as ‘packageui’.",[37,183,186],{"className":184,"code":185,"language":172},[170],"package $ cd vuetest\u002Fjs\njs $ vue create packageui\n\nVue CLI v4.4.6\n? Please pick a preset: default (babel, eslint) #default\n\nVue CLI v4.4.6\n✨  Creating project in documentroot\u002Fvuetest\u002Fjs\u002Fpackageui.\n🗃  Initializing git repository...\n⚙️  Installing CLI plugins. This might take a while... \n\n🎉  Successfully created project packageui.\n\njs $ cd packageui && tree -L 1\n.\n├── README.md\n├── babel.config.js\n├── node_modules\n├── package-lock.json\n├── package.json\n├── public\n",[44,187,185],{"__ignoreMap":42},[13,189,190],{},"Vue project has been created successfully! Next, create vue.config.js and write webpack setting for C5’s asset system.",[37,192,195],{"className":193,"code":194,"language":172},[170],"packageui $ touch vue.config.js\n",[44,196,194],{"__ignoreMap":42},[37,198,201],{"className":199,"code":200,"language":172},[170],"module.exports = {\n    configureWebpack: {\n      output: {\n        filename: '[name].js',\n        chunkFilename: '[name].js'\n      }\n    },\n  }\n",[44,202,200],{"__ignoreMap":42},[13,204,205,206,209],{},"This file configs that the name of compiled js files from vue file when running npm run build will be same name under the ",[44,207,208],{},"\u002Fdist"," directory.",[13,211,212],{},"When we build vue file on initial webpack config, built js file has been had hashed letters such as app384#34a.js . The hash will change at every build. Compiled js file name must be always same to be read by C5’s asset system. So I config that file.",[214,215,217],"h4",{"id":216},"if-you-want-use-vue-project-by-multiple-packages","If you want use vue project by multiple packages",[13,219,220,221,224,225,228,229],{},"In this time, I create dedicated vue project under the package called vuetest and its directory. But if you use it by multi packages, create ",[44,222,223],{},"\u002Fjs"," directory under ",[44,226,227],{},"\u002Fapplication"," directory and make vue project under ",[44,230,231],{},"\u002Fapplication\u002Fjs",[149,233,235],{"id":234},"combine-c5-and-compiled-js-file","Combine C5 and compiled js file",[13,237,238,239,241],{},"When running build with vue cli, compiled js file will be generated under ",[44,240,208],{}," directory. Let’s config as C5 system and page renders components can read that files!",[13,243,244,245,248],{},"By the way, build ",[44,246,247],{},"main.js"," . That file renders App component at page contains div element with id attribute named as ‘app’.",[37,250,255],{"className":251,"code":252,"filename":253,"language":254,"meta":42,"style":42},"language-javascript shiki shiki-themes material-theme-ocean","import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n","src\u002Fmain.js","javascript",[44,256,257,281,297,301,324,328,343,367],{"__ignoreMap":42},[47,258,259,263,267,270,274,278],{"class":49,"line":50},[47,260,262],{"class":261},"s6cf3","import",[47,264,266],{"class":265},"s0W1g"," Vue ",[47,268,269],{"class":261},"from",[47,271,273],{"class":272},"sAklC"," '",[47,275,277],{"class":276},"sfyAc","vue",[47,279,280],{"class":272},"'\n",[47,282,283,285,288,290,292,295],{"class":49,"line":4},[47,284,262],{"class":261},[47,286,287],{"class":265}," App ",[47,289,269],{"class":261},[47,291,273],{"class":272},[47,293,294],{"class":276},".\u002FApp.vue",[47,296,280],{"class":272},[47,298,299],{"class":49,"line":61},[47,300,65],{"emptyLinePlaceholder":64},[47,302,303,306,309,312,314,317,320],{"class":49,"line":68},[47,304,305],{"class":265},"Vue",[47,307,308],{"class":272},".",[47,310,311],{"class":265},"config",[47,313,308],{"class":272},[47,315,316],{"class":265},"productionTip ",[47,318,319],{"class":272},"=",[47,321,323],{"class":322},"sbqyR"," false\n",[47,325,326],{"class":49,"line":74},[47,327,65],{"emptyLinePlaceholder":64},[47,329,330,333,337,340],{"class":49,"line":80},[47,331,332],{"class":272},"new",[47,334,336],{"class":335},"sdLwU"," Vue",[47,338,339],{"class":265},"(",[47,341,342],{"class":272},"{\n",[47,344,345,348,351,355,359,361,364],{"class":49,"line":85},[47,346,347],{"class":335},"  render",[47,349,350],{"class":272},":",[47,352,354],{"class":353},"s7ZW3"," h",[47,356,358],{"class":357},"sJ14y"," =>",[47,360,354],{"class":335},[47,362,363],{"class":265},"(App)",[47,365,366],{"class":272},",\n",[47,368,369,372,375,377,380,382,385,388,390],{"class":49,"line":91},[47,370,371],{"class":272},"}",[47,373,374],{"class":265},")",[47,376,308],{"class":272},[47,378,379],{"class":335},"$mount",[47,381,339],{"class":265},[47,383,384],{"class":272},"'",[47,386,387],{"class":276},"#app",[47,389,384],{"class":272},[47,391,392],{"class":265},")\n",[37,394,397],{"className":395,"code":396,"language":172},[170],"packageui ＄ npm run build\n.\n├── README.md\n├── babel.config.js\n├── dist\n│   ├── app.js\n│   ├── app.js.map\n│   ├── chunk-vendors.js\n│   ├── chunk-vendors.js.map\n│   ├── css\n│   ├── favicon.ico\n│   ├── img\n│   └── index.html\n├\n",[44,398,396],{"__ignoreMap":42},[13,400,401,402,405,406],{},"Build succeeded. Some files are not needed, but it is just ok to config as reading ",[44,403,404],{},"app.js"," and ",[44,407,408],{},"chunk-vendor.js",[13,410,411,412,374],{},"To read those js files, write some PHP script in package’s install controller php file (",[44,413,414],{},"package\u002Fvuetest\u002Fcontroller.php",[37,416,419],{"className":39,"code":417,"filename":418,"language":41,"meta":42,"style":42},"\u003C?php\nnamespace Concrete\\Package\\Vuetest;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Asset\\AssetList;\nuse \\Concrete\\Core\\Asset\\Asset;\n\nclass Controller extends \\Concrete\\Core\\Package\\Package {\n    protected $pkgHandle = 'vuetest';\n    protected $appVersionRequired = '5.7.4';\n    protected $pkgVersion = '1.0.0';\n\n    public function on_start()\n    {\n        $al = AssetList::getInstance();\n        $al->register(\n            'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n            $this->pkgHandle\n        );\n        \n        $al->register(\n            'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n            $this->pkgHandle\n        );\n        \n        $al->registerGroup('package-vue-production', array(\n            array('javascript', 'package-vue-build'),\n            array('javascript', 'package-vue-chunk'),\n        )); \n    }\n...\n}\n","controller.php",[44,420,421,426,431,436,441,446,450,455,460,465,470,474,479,485,491,497,503,509,515,521,527,532,538,543,548,553,558,564,570,576,582,588,594],{"__ignoreMap":42},[47,422,423],{"class":49,"line":50},[47,424,425],{},"\u003C?php\n",[47,427,428],{"class":49,"line":4},[47,429,430],{},"namespace Concrete\\Package\\Vuetest;\n",[47,432,433],{"class":49,"line":61},[47,434,435],{},"defined('C5_EXECUTE') or die('Access Denied.');\n",[47,437,438],{"class":49,"line":68},[47,439,440],{},"use \\Concrete\\Core\\Asset\\AssetList;\n",[47,442,443],{"class":49,"line":74},[47,444,445],{},"use \\Concrete\\Core\\Asset\\Asset;\n",[47,447,448],{"class":49,"line":80},[47,449,65],{"emptyLinePlaceholder":64},[47,451,452],{"class":49,"line":85},[47,453,454],{},"class Controller extends \\Concrete\\Core\\Package\\Package {\n",[47,456,457],{"class":49,"line":91},[47,458,459],{},"    protected $pkgHandle = 'vuetest';\n",[47,461,462],{"class":49,"line":97},[47,463,464],{},"    protected $appVersionRequired = '5.7.4';\n",[47,466,467],{"class":49,"line":102},[47,468,469],{},"    protected $pkgVersion = '1.0.0';\n",[47,471,472],{"class":49,"line":108},[47,473,65],{"emptyLinePlaceholder":64},[47,475,476],{"class":49,"line":114},[47,477,478],{},"    public function on_start()\n",[47,480,482],{"class":49,"line":481},13,[47,483,484],{},"    {\n",[47,486,488],{"class":49,"line":487},14,[47,489,490],{},"        $al = AssetList::getInstance();\n",[47,492,494],{"class":49,"line":493},15,[47,495,496],{},"        $al->register(\n",[47,498,500],{"class":49,"line":499},16,[47,501,502],{},"            'javascript', 'package-vue-build', 'js\u002Fpackageui\u002Fdist\u002Fapp.js',\n",[47,504,506],{"class":49,"line":505},17,[47,507,508],{},"            array('version' => '1.0.0', 'position' => Asset::ASSET_POSITION_FOOTER, 'combine' => true),\n",[47,510,512],{"class":49,"line":511},18,[47,513,514],{},"            $this->pkgHandle\n",[47,516,518],{"class":49,"line":517},19,[47,519,520],{},"        );\n",[47,522,524],{"class":49,"line":523},20,[47,525,526],{},"        \n",[47,528,530],{"class":49,"line":529},21,[47,531,496],{},[47,533,535],{"class":49,"line":534},22,[47,536,537],{},"            'javascript', 'package-vue-chunk', 'js\u002Fpackageui\u002Fdist\u002Fchunk-vendors.js',\n",[47,539,541],{"class":49,"line":540},23,[47,542,508],{},[47,544,546],{"class":49,"line":545},24,[47,547,514],{},[47,549,551],{"class":49,"line":550},25,[47,552,520],{},[47,554,556],{"class":49,"line":555},26,[47,557,526],{},[47,559,561],{"class":49,"line":560},27,[47,562,563],{},"        $al->registerGroup('package-vue-production', array(\n",[47,565,567],{"class":49,"line":566},28,[47,568,569],{},"            array('javascript', 'package-vue-build'),\n",[47,571,573],{"class":49,"line":572},29,[47,574,575],{},"            array('javascript', 'package-vue-chunk'),\n",[47,577,579],{"class":49,"line":578},30,[47,580,581],{},"        )); \n",[47,583,585],{"class":49,"line":584},31,[47,586,587],{},"    }\n",[47,589,591],{"class":49,"line":590},32,[47,592,593],{},"...\n",[47,595,597],{"class":49,"line":596},33,[47,598,599],{},"}\n",[13,601,602,605],{},[44,603,604],{},"$al->register"," registers those two js files referred by path at controller of vuetest package. For simply asset reading, let’s group two files as name of package-vue-production .",[13,607,608],{},"C5 has asset registering\u002Freading system like this. Using this system, we can use registered files anywhere pages without file path problem. Now, we have registered js files, so next we set reading them on the page.",[13,610,611,612,615],{},"Write PHP script in ",[44,613,614],{},"vuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php"," as below",[37,617,619],{"className":39,"code":618,"language":41,"meta":42,"style":42},"\u003C?php\nnamespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\ndefined('C5_EXECUTE') or die('Access Denied.');\nuse \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n\nclass Vuetest extends DashboardPageController\n{\n    public $packageHandle = 'vuetest';\n\n    public function view() {\n        $this->requireAsset('package-vue-production');\n        $this->set('success', 'My success message');\n    }\n}\n",[44,620,621,625,630,634,639,643,648,652,657,661,666,671,676,680],{"__ignoreMap":42},[47,622,623],{"class":49,"line":50},[47,624,425],{},[47,626,627],{"class":49,"line":4},[47,628,629],{},"namespace Concrete\\Package\\Vuetest\\Controller\\SinglePage\\Dashboard;\n",[47,631,632],{"class":49,"line":61},[47,633,435],{},[47,635,636],{"class":49,"line":68},[47,637,638],{},"use \\Concrete\\Core\\Page\\Controller\\DashboardPageController;\n",[47,640,641],{"class":49,"line":74},[47,642,65],{"emptyLinePlaceholder":64},[47,644,645],{"class":49,"line":80},[47,646,647],{},"class Vuetest extends DashboardPageController\n",[47,649,650],{"class":49,"line":85},[47,651,342],{},[47,653,654],{"class":49,"line":91},[47,655,656],{},"    public $packageHandle = 'vuetest';\n",[47,658,659],{"class":49,"line":97},[47,660,65],{"emptyLinePlaceholder":64},[47,662,663],{"class":49,"line":102},[47,664,665],{},"    public function view() {\n",[47,667,668],{"class":49,"line":108},[47,669,670],{},"        $this->requireAsset('package-vue-production');\n",[47,672,673],{"class":49,"line":114},[47,674,675],{},"        $this->set('success', 'My success message');\n",[47,677,678],{"class":49,"line":481},[47,679,587],{},[47,681,682],{"class":49,"line":487},[47,683,599],{},[13,685,686,689,690,693,694,697],{},[44,687,688],{},"$this->requireAsset('package-vue-production');"," orders page controller that ‘Read registered asset name as ",[44,691,692],{},"“package-vue-production”"," on this page(",[44,695,696],{},"view.php",")!‘",[13,699,700,701],{},"After setting, let’s search if the js files are read. Opening Chrome developer tool…\n",[122,702],{":src":703,":width":125},"'_mix\u002Fsc-2020-08-01-19.52.09-768x133.png'",[13,705,706,707,710,711,714],{},"Path ",[44,708,709],{},"\u002Fpackages\u002Fvuetest\u002Fjs\u002Fdist\u002F**"," are found! Next, create div element has ",[44,712,713],{},"id=\"app\""," and see the page again.",[13,716,717],{},[44,718,719],{},"Invuetest\u002Fsingle_pages\u002Fdashboard\u002Fvuetest\u002Fview.php",[37,721,723],{"className":39,"code":722,"filename":696,"language":41,"meta":42,"style":42},"\u003C?php\ndefined('C5_EXECUTE') or die('Access Denied.');\n?>\n\n\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[44,724,725,729,733,738,742],{"__ignoreMap":42},[47,726,727],{"class":49,"line":50},[47,728,425],{},[47,730,731],{"class":49,"line":4},[47,732,435],{},[47,734,735],{"class":49,"line":61},[47,736,737],{},"?>\n",[47,739,740],{"class":49,"line":68},[47,741,65],{"emptyLinePlaceholder":64},[47,743,744],{"class":49,"line":74},[47,745,746],{},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n",[13,748,749],{},"Reload page…",[122,751],{":src":752,":width":753,":center":754},"'_mix\u002Fsh-2020-08-01-19.56.01-768x812.png'","'500px'","true",[13,756,757],{},"Vue component (App) are rendered successfully!! Some image and layout dose not work because the paths for img and css are incorrect. But created vue component itself with vue CLI are read and appeared on target page.",[29,759,761],{"id":760},"next-step","Next Step",[13,763,764],{},"The above is the method to create a vue project on the concrete5 package and combine them. Setting to use vue has been readied, so next step, we create form to input data ,flow to register data in DB and registered data editing page .",[766,767,768],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":42,"searchDepth":61,"depth":61,"links":770},[771,774,781],{"id":31,"depth":4,"text":32,"children":772},[773],{"id":151,"depth":61,"text":152},{"id":158,"depth":4,"text":159,"children":775},[776,777,780],{"id":162,"depth":61,"text":163},{"id":177,"depth":61,"text":178,"children":778},[779],{"id":216,"depth":68,"text":217},{"id":234,"depth":61,"text":235},{"id":760,"depth":4,"text":761},[783],"devstack","2020-08-25","Making Rich UI in Concrete5 with VueCLI.","md",{},"\u002Fen\u002Fseries\u002Fconcrete5vue-1",{"title":8,"description":785},"enconcrete5vue","en\u002Fseries\u002Fconcrete5vue-1",[793,794,277],"concrete5","js","_mix\u002Fvuewithconcrete.png",null,"uCGiRmlnXldeIG8DikjaUPsIaa4G61Yrz5b1kwmPD2w",{"id":799,"title":800,"body":801,"category":3250,"createdAt":796,"description":3251,"extension":786,"index":796,"meta":3252,"navigation":64,"path":3253,"publish":64,"seo":3254,"series":796,"seriesTitle":796,"stem":3255,"tag":3256,"thumbnail":3257,"updatedAt":796,"__hash__":3258},"en_articles\u002Fen\u002Farticles\u002Fgoogle-map-vuejs.md","How to draw routes on Google Map with Google Maps API and Vue.js",{"type":10,"value":802,"toc":3237},[803,806,810,821,830,833,836,840,849,855,859,869,1201,1208,1211,1215,1221,1262,1265,1321,1331,1469,1472,1476,1482,1777,1786,1789,1797,1810,1816,1819,1826,1931,1935,1938,2348,2354,2357,2422,2425,2428,2431,2435,2442,2445,2790,2797,2800,2803,2807,2810,2814,2817,2820,2835,2841,3196,3214,3217,3220,3224,3227,3231,3234],[13,804,805],{},"Hello developers! Thank you for reading my article. When I developed my own application, I searched how to draw lines on Google Map with Vue. And I have manages to develop it. This article, explains about developing function to dispaly map on your web browser with Google Map API and Vue.js(or vanilla.js). I omit partially how to install vue.js and obtain Google Map API key.",[29,807,809],{"id":808},"obtain-google-map-api-key","Obtain Google Map API key",[13,811,812,813,820],{},"I omit detail to get but explain minimum requirements. At first, obtain Google Map API at ",[814,815,819],"a",{"href":816,"rel":817},"https:\u002F\u002Fcloud.google.com\u002Fmaps-platform?hl=ja",[818],"nofollow","Google Cloud Platform"," with your Google Account.",[13,822,823,824,829],{},"Requests for $ 200 per month are free. So you can test within the free limit. And you need ",[814,825,828],{"href":826,"rel":827},"https:\u002F\u002Fconsole.cloud.google.com\u002Fapis\u002Flibrary\u002Fmaps-backend.googleapis.com?",[818],"Maps JavaScript API"," to render Google Map on the web browser.",[122,831],{":src":832,":width":753,":center":754},"'_mix\u002Fsch-2021-03-07-17.15.12.png'",[13,834,835],{},"Enable this API key and you will obtain the key code. That's all to set up for API.",[29,837,839],{"id":838},"prepear-vuejs","Prepear Vue.js",[13,841,842,843,848],{},"In this time, we develop with ",[814,844,847],{"href":845,"rel":846},"https:\u002F\u002Fcli.vuejs.org\u002F",[818],"Vue CLI",". Create a project with Vue CLI.",[37,850,853],{"className":851,"code":852,"language":172},[170],"$ vue create vue_map\n",[44,854,852],{"__ignoreMap":42},[149,856,858],{"id":857},"load-for-api-sourrce-file","Load for api sourrce file",[13,860,861,862,865,866,209],{},"Insert the below codes to ",[44,863,864],{},"index.html"," under the ",[44,867,868],{},"\u002Fpublic",[37,870,875],{"className":871,"code":872,"filename":873,"language":874,"meta":42,"style":42},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml lang=\"\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    \u003Clink rel=\"icon\" href=\"\u003C%= BASE_URL %>favicon.ico\">\n    \n　　\u003C!-- Insert this script -->\n    \u003Cscript src=\"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja\">\u003C\u002Fscript>\n   \n　　 \u003Ctitle>\u003C%= htmlWebpackPlugin.options.title %>\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cnoscript>\n      \u003Cstrong>We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.\u003C\u002Fstrong>\n    \u003C\u002Fnoscript>\n    \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n    \u003C!-- built files will be auto injected -->\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","public\u002Findex.html","html",[44,876,877,892,909,919,942,974,1005,1038,1043,1049,1075,1080,1101,1110,1119,1128,1146,1155,1180,1185,1193],{"__ignoreMap":42},[47,878,879,882,886,889],{"class":49,"line":50},[47,880,881],{"class":272},"\u003C!",[47,883,885],{"class":884},"s-wAU","DOCTYPE",[47,887,888],{"class":357}," html",[47,890,891],{"class":272},">\n",[47,893,894,897,899,902,904,907],{"class":49,"line":4},[47,895,896],{"class":272},"\u003C",[47,898,874],{"class":884},[47,900,901],{"class":357}," lang",[47,903,319],{"class":272},[47,905,906],{"class":272},"\"\"",[47,908,891],{"class":272},[47,910,911,914,917],{"class":49,"line":61},[47,912,913],{"class":272},"  \u003C",[47,915,916],{"class":884},"head",[47,918,891],{"class":272},[47,920,921,924,927,930,932,935,938,940],{"class":49,"line":68},[47,922,923],{"class":272},"    \u003C",[47,925,926],{"class":884},"meta",[47,928,929],{"class":357}," charset",[47,931,319],{"class":272},[47,933,934],{"class":272},"\"",[47,936,937],{"class":276},"utf-8",[47,939,934],{"class":272},[47,941,891],{"class":272},[47,943,944,946,948,951,953,955,958,960,963,965,967,970,972],{"class":49,"line":74},[47,945,923],{"class":272},[47,947,926],{"class":884},[47,949,950],{"class":357}," http-equiv",[47,952,319],{"class":272},[47,954,934],{"class":272},[47,956,957],{"class":276},"X-UA-Compatible",[47,959,934],{"class":272},[47,961,962],{"class":357}," content",[47,964,319],{"class":272},[47,966,934],{"class":272},[47,968,969],{"class":276},"IE=edge",[47,971,934],{"class":272},[47,973,891],{"class":272},[47,975,976,978,980,983,985,987,990,992,994,996,998,1001,1003],{"class":49,"line":80},[47,977,923],{"class":272},[47,979,926],{"class":884},[47,981,982],{"class":357}," name",[47,984,319],{"class":272},[47,986,934],{"class":272},[47,988,989],{"class":276},"viewport",[47,991,934],{"class":272},[47,993,962],{"class":357},[47,995,319],{"class":272},[47,997,934],{"class":272},[47,999,1000],{"class":276},"width=device-width,initial-scale=1.0",[47,1002,934],{"class":272},[47,1004,891],{"class":272},[47,1006,1007,1009,1012,1015,1017,1019,1022,1024,1027,1029,1031,1034,1036],{"class":49,"line":85},[47,1008,923],{"class":272},[47,1010,1011],{"class":884},"link",[47,1013,1014],{"class":357}," rel",[47,1016,319],{"class":272},[47,1018,934],{"class":272},[47,1020,1021],{"class":276},"icon",[47,1023,934],{"class":272},[47,1025,1026],{"class":357}," href",[47,1028,319],{"class":272},[47,1030,934],{"class":272},[47,1032,1033],{"class":276},"\u003C%= BASE_URL %>favicon.ico",[47,1035,934],{"class":272},[47,1037,891],{"class":272},[47,1039,1040],{"class":49,"line":91},[47,1041,1042],{"class":265},"    \n",[47,1044,1045],{"class":49,"line":97},[47,1046,1048],{"class":1047},"sC9rS","　　\u003C!-- Insert this script -->\n",[47,1050,1051,1053,1056,1059,1061,1063,1066,1068,1071,1073],{"class":49,"line":102},[47,1052,923],{"class":272},[47,1054,1055],{"class":884},"script",[47,1057,1058],{"class":357}," src",[47,1060,319],{"class":272},[47,1062,934],{"class":272},[47,1064,1065],{"class":276},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs?key=YOUR_API_KEY&language=ja",[47,1067,934],{"class":272},[47,1069,1070],{"class":272},">\u003C\u002F",[47,1072,1055],{"class":884},[47,1074,891],{"class":272},[47,1076,1077],{"class":49,"line":108},[47,1078,1079],{"class":265},"   \n",[47,1081,1082,1085,1088,1091,1094,1097,1099],{"class":49,"line":114},[47,1083,1084],{"class":272},"　　 \u003C",[47,1086,1087],{"class":884},"title",[47,1089,1090],{"class":272},">",[47,1092,1093],{"class":265},"\u003C%= htmlWebpackPlugin.options.title %>",[47,1095,1096],{"class":272},"\u003C\u002F",[47,1098,1087],{"class":884},[47,1100,891],{"class":272},[47,1102,1103,1106,1108],{"class":49,"line":481},[47,1104,1105],{"class":272},"  \u003C\u002F",[47,1107,916],{"class":884},[47,1109,891],{"class":272},[47,1111,1112,1114,1117],{"class":49,"line":487},[47,1113,913],{"class":272},[47,1115,1116],{"class":884},"body",[47,1118,891],{"class":272},[47,1120,1121,1123,1126],{"class":49,"line":493},[47,1122,923],{"class":272},[47,1124,1125],{"class":884},"noscript",[47,1127,891],{"class":272},[47,1129,1130,1133,1135,1137,1140,1142,1144],{"class":49,"line":499},[47,1131,1132],{"class":272},"      \u003C",[47,1134,17],{"class":884},[47,1136,1090],{"class":272},[47,1138,1139],{"class":265},"We're sorry but \u003C%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.",[47,1141,1096],{"class":272},[47,1143,17],{"class":884},[47,1145,891],{"class":272},[47,1147,1148,1151,1153],{"class":49,"line":505},[47,1149,1150],{"class":272},"    \u003C\u002F",[47,1152,1125],{"class":884},[47,1154,891],{"class":272},[47,1156,1157,1159,1162,1165,1167,1169,1172,1174,1176,1178],{"class":49,"line":511},[47,1158,923],{"class":272},[47,1160,1161],{"class":884},"div",[47,1163,1164],{"class":357}," id",[47,1166,319],{"class":272},[47,1168,934],{"class":272},[47,1170,1171],{"class":276},"app",[47,1173,934],{"class":272},[47,1175,1070],{"class":272},[47,1177,1161],{"class":884},[47,1179,891],{"class":272},[47,1181,1182],{"class":49,"line":517},[47,1183,1184],{"class":1047},"    \u003C!-- built files will be auto injected -->\n",[47,1186,1187,1189,1191],{"class":49,"line":523},[47,1188,1105],{"class":272},[47,1190,1116],{"class":884},[47,1192,891],{"class":272},[47,1194,1195,1197,1199],{"class":49,"line":529},[47,1196,1096],{"class":272},[47,1198,874],{"class":884},[47,1200,891],{"class":272},[13,1202,1203,1204,1207],{},"I had tried to install API source with npm but many libraries are for node.js. So I used the outer script file from ",[44,1205,1206],{},"http:\u002F\u002Fmaps.google.com\u002Fmaps\u002Fapi\u002Fjs",". If you use it, you should load it before vue.js loaded.",[13,1209,1210],{},"The script needs the API key you get. When you use in the production, set the API configure on Google Cloud Platform as used only within your site (specific origin). If you don't that, anybody can use the key and billing just comes to YOUR credit card!",[149,1212,1214],{"id":1213},"register-google-map-api-as-vue-plugin","Register Google Map API as Vue plugin",[13,1216,1217,1218],{},"After the script loaded, you can use the classes and method that operate Google Map in ",[44,1219,1220],{},"window.google",[37,1222,1224],{"className":251,"code":1223,"language":254,"meta":42,"style":42},"console.lgo(window.google);\n\u002F**\n*{maps: {…}}\n*\u002F\n",[44,1225,1226,1247,1252,1257],{"__ignoreMap":42},[47,1227,1228,1231,1233,1236,1239,1241,1244],{"class":49,"line":50},[47,1229,1230],{"class":265},"console",[47,1232,308],{"class":272},[47,1234,1235],{"class":335},"lgo",[47,1237,1238],{"class":265},"(window",[47,1240,308],{"class":272},[47,1242,1243],{"class":265},"google)",[47,1245,1246],{"class":272},";\n",[47,1248,1249],{"class":49,"line":4},[47,1250,1251],{"class":1047},"\u002F**\n",[47,1253,1254],{"class":49,"line":61},[47,1255,1256],{"class":1047},"*{maps: {…}}\n",[47,1258,1259],{"class":49,"line":68},[47,1260,1261],{"class":1047},"*\u002F\n",[13,1263,1264],{},"For example, calling the api to mount a map as below.",[37,1266,1268],{"className":251,"code":1267,"language":254,"meta":42,"style":42},"window.google.maps.Map(document.getElementById('map'),{option});\n",[44,1269,1270],{"__ignoreMap":42},[47,1271,1272,1275,1277,1280,1282,1285,1287,1290,1293,1295,1298,1300,1302,1305,1307,1309,1312,1315,1317,1319],{"class":49,"line":50},[47,1273,1274],{"class":265},"window",[47,1276,308],{"class":272},[47,1278,1279],{"class":265},"google",[47,1281,308],{"class":272},[47,1283,1284],{"class":265},"maps",[47,1286,308],{"class":272},[47,1288,1289],{"class":335},"Map",[47,1291,1292],{"class":265},"(document",[47,1294,308],{"class":272},[47,1296,1297],{"class":335},"getElementById",[47,1299,339],{"class":265},[47,1301,384],{"class":272},[47,1303,1304],{"class":276},"map",[47,1306,384],{"class":272},[47,1308,374],{"class":265},[47,1310,1311],{"class":272},",{",[47,1313,1314],{"class":265},"option",[47,1316,371],{"class":272},[47,1318,374],{"class":265},[47,1320,1246],{"class":272},[13,1322,1323,1324,1327,1328,308],{},"But calling ",[44,1325,1326],{},"window.google.maps"," in every time is bothersome so let's make a plugin to call it as ",[44,1329,1330],{},"this.$gm",[37,1332,1334],{"className":251,"code":1333,"filename":253,"language":254,"meta":42,"style":42},"import Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\n\u002F\u002F THIS\nVue.prototype.$gm = window.google.maps;\n\nVue.config.productionTip = false\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n",[44,1335,1336,1350,1364,1368,1373,1403,1407,1423,1433,1449],{"__ignoreMap":42},[47,1337,1338,1340,1342,1344,1346,1348],{"class":49,"line":50},[47,1339,262],{"class":261},[47,1341,266],{"class":265},[47,1343,269],{"class":261},[47,1345,273],{"class":272},[47,1347,277],{"class":276},[47,1349,280],{"class":272},[47,1351,1352,1354,1356,1358,1360,1362],{"class":49,"line":4},[47,1353,262],{"class":261},[47,1355,287],{"class":265},[47,1357,269],{"class":261},[47,1359,273],{"class":272},[47,1361,294],{"class":276},[47,1363,280],{"class":272},[47,1365,1366],{"class":49,"line":61},[47,1367,65],{"emptyLinePlaceholder":64},[47,1369,1370],{"class":49,"line":68},[47,1371,1372],{"class":1047},"\u002F\u002F THIS\n",[47,1374,1375,1378,1380,1383,1385,1388,1390,1393,1395,1397,1399,1401],{"class":49,"line":74},[47,1376,305],{"class":1377},"s5Dmg",[47,1379,308],{"class":272},[47,1381,1382],{"class":265},"prototype",[47,1384,308],{"class":272},[47,1386,1387],{"class":265},"$gm ",[47,1389,319],{"class":272},[47,1391,1392],{"class":265}," window",[47,1394,308],{"class":272},[47,1396,1279],{"class":265},[47,1398,308],{"class":272},[47,1400,1284],{"class":265},[47,1402,1246],{"class":272},[47,1404,1405],{"class":49,"line":80},[47,1406,65],{"emptyLinePlaceholder":64},[47,1408,1409,1411,1413,1415,1417,1419,1421],{"class":49,"line":85},[47,1410,305],{"class":265},[47,1412,308],{"class":272},[47,1414,311],{"class":265},[47,1416,308],{"class":272},[47,1418,316],{"class":265},[47,1420,319],{"class":272},[47,1422,323],{"class":322},[47,1424,1425,1427,1429,1431],{"class":49,"line":91},[47,1426,332],{"class":272},[47,1428,336],{"class":335},[47,1430,339],{"class":265},[47,1432,342],{"class":272},[47,1434,1435,1437,1439,1441,1443,1445,1447],{"class":49,"line":97},[47,1436,347],{"class":335},[47,1438,350],{"class":272},[47,1440,354],{"class":353},[47,1442,358],{"class":357},[47,1444,354],{"class":335},[47,1446,363],{"class":265},[47,1448,366],{"class":272},[47,1450,1451,1453,1455,1457,1459,1461,1463,1465,1467],{"class":49,"line":102},[47,1452,371],{"class":272},[47,1454,374],{"class":265},[47,1456,308],{"class":272},[47,1458,379],{"class":335},[47,1460,339],{"class":265},[47,1462,384],{"class":272},[47,1464,387],{"class":276},[47,1466,384],{"class":272},[47,1468,392],{"class":265},[13,1470,1471],{},"Preparation is completed.",[29,1473,1475],{"id":1474},"anyway-lets-mount-the-map","Anyway lets' mount the map.",[13,1477,1478,1479,308],{},"Let's mount the Google Map with vue. Write codes in ",[44,1480,1481],{},"App.vue",[37,1483,1487],{"className":1484,"code":1485,"filename":1486,"language":277,"meta":42,"style":42},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n  \u003Cdiv id=\"app\" class=\"mt-4\">\n      \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'App',\n  data(){\n    return{\n      map:undefined,\n    }\n  },\n  mounted(){\n   const map = new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n      zoom: 10,\n    });\n　　this.map = map;\n  }\n}\n\u003C\u002Fscript>\n","src\u002FApp.vue",[44,1488,1489,1498,1528,1550,1558,1566,1570,1578,1589,1605,1613,1620,1628,1632,1637,1644,1690,1726,1738,1747,1760,1765,1769],{"__ignoreMap":42},[47,1490,1491,1493,1496],{"class":49,"line":50},[47,1492,896],{"class":272},[47,1494,1495],{"class":884},"template",[47,1497,891],{"class":272},[47,1499,1500,1502,1504,1506,1508,1510,1512,1514,1517,1519,1521,1524,1526],{"class":49,"line":4},[47,1501,913],{"class":272},[47,1503,1161],{"class":884},[47,1505,1164],{"class":357},[47,1507,319],{"class":272},[47,1509,934],{"class":272},[47,1511,1171],{"class":276},[47,1513,934],{"class":272},[47,1515,1516],{"class":357}," class",[47,1518,319],{"class":272},[47,1520,934],{"class":272},[47,1522,1523],{"class":276},"mt-4",[47,1525,934],{"class":272},[47,1527,891],{"class":272},[47,1529,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548],{"class":49,"line":61},[47,1531,1132],{"class":272},[47,1533,1161],{"class":884},[47,1535,1164],{"class":357},[47,1537,319],{"class":272},[47,1539,934],{"class":272},[47,1541,1304],{"class":276},[47,1543,934],{"class":272},[47,1545,1070],{"class":272},[47,1547,1161],{"class":884},[47,1549,891],{"class":272},[47,1551,1552,1554,1556],{"class":49,"line":68},[47,1553,1105],{"class":272},[47,1555,1161],{"class":884},[47,1557,891],{"class":272},[47,1559,1560,1562,1564],{"class":49,"line":74},[47,1561,1096],{"class":272},[47,1563,1495],{"class":884},[47,1565,891],{"class":272},[47,1567,1568],{"class":49,"line":80},[47,1569,65],{"emptyLinePlaceholder":64},[47,1571,1572,1574,1576],{"class":49,"line":85},[47,1573,896],{"class":272},[47,1575,1055],{"class":884},[47,1577,891],{"class":272},[47,1579,1580,1583,1586],{"class":49,"line":91},[47,1581,1582],{"class":261},"export",[47,1584,1585],{"class":261}," default",[47,1587,1588],{"class":272}," {\n",[47,1590,1591,1594,1596,1598,1601,1603],{"class":49,"line":97},[47,1592,1593],{"class":884},"  name",[47,1595,350],{"class":272},[47,1597,273],{"class":272},[47,1599,1600],{"class":276},"App",[47,1602,384],{"class":272},[47,1604,366],{"class":272},[47,1606,1607,1610],{"class":49,"line":102},[47,1608,1609],{"class":884},"  data",[47,1611,1612],{"class":272},"(){\n",[47,1614,1615,1618],{"class":49,"line":108},[47,1616,1617],{"class":261},"    return",[47,1619,342],{"class":272},[47,1621,1622,1625],{"class":49,"line":114},[47,1623,1624],{"class":884},"      map",[47,1626,1627],{"class":272},":undefined,\n",[47,1629,1630],{"class":49,"line":481},[47,1631,587],{"class":272},[47,1633,1634],{"class":49,"line":487},[47,1635,1636],{"class":272},"  },\n",[47,1638,1639,1642],{"class":49,"line":493},[47,1640,1641],{"class":884},"  mounted",[47,1643,1612],{"class":272},[47,1645,1646,1649,1652,1655,1658,1661,1664,1666,1668,1670,1673,1675,1677,1679,1681,1683,1685,1687],{"class":49,"line":499},[47,1647,1648],{"class":357},"   const",[47,1650,1651],{"class":265}," map",[47,1653,1654],{"class":272}," =",[47,1656,1657],{"class":272}," new",[47,1659,1660],{"class":272}," this.",[47,1662,1663],{"class":265},"$gm",[47,1665,308],{"class":272},[47,1667,1289],{"class":335},[47,1669,339],{"class":884},[47,1671,1672],{"class":265},"document",[47,1674,308],{"class":272},[47,1676,1297],{"class":335},[47,1678,339],{"class":884},[47,1680,384],{"class":272},[47,1682,1304],{"class":276},[47,1684,384],{"class":272},[47,1686,374],{"class":884},[47,1688,1689],{"class":272},",{\n",[47,1691,1692,1695,1697,1700,1703,1705,1709,1712,1715,1717,1720,1723],{"class":49,"line":505},[47,1693,1694],{"class":884},"      center",[47,1696,350],{"class":272},[47,1698,1699],{"class":272}," {",[47,1701,1702],{"class":884}," lat",[47,1704,350],{"class":272},[47,1706,1708],{"class":1707},"sx098"," 34.855273888888888",[47,1710,1711],{"class":272},",",[47,1713,1714],{"class":884}," lng",[47,1716,350],{"class":272},[47,1718,1719],{"class":1707}," 135.30649",[47,1721,1722],{"class":272}," },",[47,1724,1725],{"class":1047}," \u002F\u002F自由な緯度・経度を入力\n",[47,1727,1728,1731,1733,1736],{"class":49,"line":511},[47,1729,1730],{"class":884},"      zoom",[47,1732,350],{"class":272},[47,1734,1735],{"class":1707}," 10",[47,1737,366],{"class":272},[47,1739,1740,1743,1745],{"class":49,"line":517},[47,1741,1742],{"class":272},"    }",[47,1744,374],{"class":884},[47,1746,1246],{"class":272},[47,1748,1749,1752,1754,1756,1758],{"class":49,"line":523},[47,1750,1751],{"class":272},"　　this.",[47,1753,1304],{"class":265},[47,1755,1654],{"class":272},[47,1757,1651],{"class":265},[47,1759,1246],{"class":272},[47,1761,1762],{"class":49,"line":529},[47,1763,1764],{"class":272},"  }\n",[47,1766,1767],{"class":49,"line":534},[47,1768,599],{"class":272},[47,1770,1771,1773,1775],{"class":49,"line":540},[47,1772,1096],{"class":272},[47,1774,1055],{"class":884},[47,1776,891],{"class":272},[13,1778,1779,1780,1785],{},"As the reference about ",[814,1781,1784],{"href":1782,"rel":1783},"https:\u002F\u002Fdevelopers.google.com\u002Fmaps\u002Fdocumentation\u002Fjavascript\u002Freference\u002Fmap?hl=ja",[818],"Maps Class"," says, specify the mounted target DOM in the first argument and write the options in the second argument.",[13,1787,1788],{},"Option cantains",[133,1790,1791,1794],{},[136,1792,1793],{},"center：the central coordinate when displayed the map.",[136,1795,1796],{},"zoom：the scale of zooming. 10 is just right.",[13,1798,1799,1802,1803,1806,1807,308],{},[44,1800,1801],{},"lat"," is the latitude and ",[44,1804,1805],{},"lng"," is the longitude. This map instance will be used to edit map so substitute to vue like ",[44,1808,1809],{},"this.map = map",[37,1811,1814],{"className":1812,"code":1813,"language":172},[170],"$ npm run serve\n",[44,1815,1813],{"__ignoreMap":42},[122,1817],{":src":1818,":width":125},"'_mix\u002Fsch-2021-03-07-17.39.26-768x352.png'",[13,1820,1821,1822,1825],{},"If displayed like this on the ",[44,1823,1824],{},"localhost",", there are no problems. If you favor not to display Street View or other buttons, set the option like below.",[37,1827,1829],{"className":251,"code":1828,"filename":253,"language":254,"meta":42,"style":42},"new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 },\n      zoom: 10,\n      streetViewControl:false, \u002F\u002F hide street view\n      fullscreenControl:false  \u002F\u002F hide full screen\n});\n",[44,1830,1831,1861,1886,1896,1911,1923],{"__ignoreMap":42},[47,1832,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859],{"class":49,"line":50},[47,1834,332],{"class":272},[47,1836,1660],{"class":272},[47,1838,1663],{"class":265},[47,1840,308],{"class":272},[47,1842,1289],{"class":335},[47,1844,1292],{"class":265},[47,1846,308],{"class":272},[47,1848,1297],{"class":335},[47,1850,339],{"class":265},[47,1852,384],{"class":272},[47,1854,1304],{"class":276},[47,1856,384],{"class":272},[47,1858,374],{"class":265},[47,1860,1689],{"class":272},[47,1862,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883],{"class":49,"line":4},[47,1864,1694],{"class":884},[47,1866,350],{"class":272},[47,1868,1699],{"class":272},[47,1870,1702],{"class":884},[47,1872,350],{"class":272},[47,1874,1708],{"class":1707},[47,1876,1711],{"class":272},[47,1878,1714],{"class":884},[47,1880,350],{"class":272},[47,1882,1719],{"class":1707},[47,1884,1885],{"class":272}," },\n",[47,1887,1888,1890,1892,1894],{"class":49,"line":61},[47,1889,1730],{"class":884},[47,1891,350],{"class":272},[47,1893,1735],{"class":1707},[47,1895,366],{"class":272},[47,1897,1898,1901,1903,1906,1908],{"class":49,"line":68},[47,1899,1900],{"class":884},"      streetViewControl",[47,1902,350],{"class":272},[47,1904,1905],{"class":322},"false",[47,1907,1711],{"class":272},[47,1909,1910],{"class":1047}," \u002F\u002F hide street view\n",[47,1912,1913,1916,1918,1920],{"class":49,"line":74},[47,1914,1915],{"class":884},"      fullscreenControl",[47,1917,350],{"class":272},[47,1919,1905],{"class":322},[47,1921,1922],{"class":1047},"  \u002F\u002F hide full screen\n",[47,1924,1925,1927,1929],{"class":49,"line":80},[47,1926,371],{"class":272},[47,1928,374],{"class":265},[47,1930,1246],{"class":272},[29,1932,1934],{"id":1933},"add-click-event-to-the-map","Add click event to the map",[13,1936,1937],{},"You can add event listener for dragging and clicking to the Google Map. It is able to add any functions fired when user clicks the specific position or a maker. As an example, let's create a function to get the latitude and longitude of clicked position on the map.",[37,1939,1941],{"className":251,"code":1940,"filename":253,"language":254,"meta":42,"style":42},"\u003Ctemplate>\n  \u003Cdiv id=\"app\" class=\"mt-4\">\n      \u003Cdiv id=\"map\">\u003C\u002Fdiv>\n      {{position}}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n  name: 'App',\n  data(){\n      return{\n        map:undefined,\n        position:undefined\n      }\n  },\n  methods:{\n   clickOnMap(mapEvent){\n    console.log(mapEvent.latLng.toString())\n    this.position = mapEvent.latLng.toString();\n   }\n  },\n  mounted(){\n   const map = new this.$gm.Map(document.getElementById('map'),{\n      center: { lat: 34.855273888888888, lng: 135.30649 }, \u002F\u002F自由な緯度・経度を入力\n      zoom: 10,\n    });\n\n    \u002F\u002F register event listener\n    map.addListener('click',(mapsMouseEvent)=>{\n      return this.clickOnMap(mapsMouseEvent);\n    });\n\n　　this.map = map;\n  }\n}\n",[44,1942,1943,1951,1979,2001,2012,2020,2028,2032,2040,2044,2051,2064,2073,2080,2087,2095,2100,2104,2111,2124,2151,2175,2180,2184,2192,2227,2253,2263,2270,2274,2279,2298,2316,2322,2327,2338,2343],{"__ignoreMap":42},[47,1944,1945,1947,1949],{"class":49,"line":50},[47,1946,896],{"class":272},[47,1948,1495],{"class":884},[47,1950,891],{"class":272},[47,1952,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977],{"class":49,"line":4},[47,1954,913],{"class":272},[47,1956,1161],{"class":884},[47,1958,1164],{"class":357},[47,1960,319],{"class":272},[47,1962,934],{"class":272},[47,1964,1171],{"class":276},[47,1966,934],{"class":272},[47,1968,1516],{"class":357},[47,1970,319],{"class":272},[47,1972,934],{"class":272},[47,1974,1523],{"class":276},[47,1976,934],{"class":272},[47,1978,891],{"class":272},[47,1980,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999],{"class":49,"line":61},[47,1982,1132],{"class":272},[47,1984,1161],{"class":884},[47,1986,1164],{"class":357},[47,1988,319],{"class":272},[47,1990,934],{"class":272},[47,1992,1304],{"class":276},[47,1994,934],{"class":272},[47,1996,1070],{"class":272},[47,1998,1161],{"class":884},[47,2000,891],{"class":272},[47,2002,2003,2006,2009],{"class":49,"line":68},[47,2004,2005],{"class":272},"      {{",[47,2007,2008],{"class":265},"position",[47,2010,2011],{"class":272},"}}\n",[47,2013,2014,2016,2018],{"class":49,"line":74},[47,2015,1105],{"class":272},[47,2017,1161],{"class":884},[47,2019,891],{"class":272},[47,2021,2022,2024,2026],{"class":49,"line":80},[47,2023,1096],{"class":272},[47,2025,1495],{"class":884},[47,2027,891],{"class":272},[47,2029,2030],{"class":49,"line":85},[47,2031,65],{"emptyLinePlaceholder":64},[47,2033,2034,2036,2038],{"class":49,"line":91},[47,2035,896],{"class":272},[47,2037,1055],{"class":884},[47,2039,891],{"class":272},[47,2041,2042],{"class":49,"line":97},[47,2043,65],{"emptyLinePlaceholder":64},[47,2045,2046,2049],{"class":49,"line":102},[47,2047,2048],{"class":265},"export default ",[47,2050,342],{"class":272},[47,2052,2053,2056,2058,2060,2062],{"class":49,"line":108},[47,2054,2055],{"class":265},"  name: ",[47,2057,384],{"class":272},[47,2059,1600],{"class":276},[47,2061,384],{"class":272},[47,2063,366],{"class":272},[47,2065,2066,2068,2071],{"class":49,"line":114},[47,2067,1609],{"class":335},[47,2069,2070],{"class":265},"()",[47,2072,342],{"class":272},[47,2074,2075,2078],{"class":49,"line":481},[47,2076,2077],{"class":265},"      return",[47,2079,342],{"class":272},[47,2081,2082,2085],{"class":49,"line":487},[47,2083,2084],{"class":1377},"        map",[47,2086,1627],{"class":272},[47,2088,2089,2092],{"class":49,"line":493},[47,2090,2091],{"class":1377},"        position",[47,2093,2094],{"class":272},":undefined\n",[47,2096,2097],{"class":49,"line":499},[47,2098,2099],{"class":272},"      }\n",[47,2101,2102],{"class":49,"line":505},[47,2103,1636],{"class":272},[47,2105,2106,2109],{"class":49,"line":511},[47,2107,2108],{"class":265},"  methods:",[47,2110,342],{"class":272},[47,2112,2113,2116,2118,2121],{"class":49,"line":517},[47,2114,2115],{"class":884},"   clickOnMap",[47,2117,339],{"class":272},[47,2119,2120],{"class":353},"mapEvent",[47,2122,2123],{"class":272},"){\n",[47,2125,2126,2129,2131,2134,2136,2138,2140,2143,2145,2148],{"class":49,"line":523},[47,2127,2128],{"class":265},"    console",[47,2130,308],{"class":272},[47,2132,2133],{"class":335},"log",[47,2135,339],{"class":884},[47,2137,2120],{"class":265},[47,2139,308],{"class":272},[47,2141,2142],{"class":265},"latLng",[47,2144,308],{"class":272},[47,2146,2147],{"class":335},"toString",[47,2149,2150],{"class":884},"())\n",[47,2152,2153,2156,2158,2160,2163,2165,2167,2169,2171,2173],{"class":49,"line":529},[47,2154,2155],{"class":272},"    this.",[47,2157,2008],{"class":265},[47,2159,1654],{"class":272},[47,2161,2162],{"class":265}," mapEvent",[47,2164,308],{"class":272},[47,2166,2142],{"class":265},[47,2168,308],{"class":272},[47,2170,2147],{"class":335},[47,2172,2070],{"class":884},[47,2174,1246],{"class":272},[47,2176,2177],{"class":49,"line":534},[47,2178,2179],{"class":272},"   }\n",[47,2181,2182],{"class":49,"line":540},[47,2183,1636],{"class":272},[47,2185,2186,2188,2190],{"class":49,"line":545},[47,2187,1641],{"class":335},[47,2189,2070],{"class":265},[47,2191,342],{"class":272},[47,2193,2194,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225],{"class":49,"line":550},[47,2195,2196],{"class":265},"   const map ",[47,2198,319],{"class":272},[47,2200,1657],{"class":272},[47,2202,1660],{"class":272},[47,2204,1663],{"class":265},[47,2206,308],{"class":272},[47,2208,1289],{"class":335},[47,2210,1292],{"class":265},[47,2212,308],{"class":272},[47,2214,1297],{"class":335},[47,2216,339],{"class":265},[47,2218,384],{"class":272},[47,2220,1304],{"class":276},[47,2222,384],{"class":272},[47,2224,374],{"class":265},[47,2226,1689],{"class":272},[47,2228,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251],{"class":49,"line":555},[47,2230,1694],{"class":884},[47,2232,350],{"class":272},[47,2234,1699],{"class":272},[47,2236,1702],{"class":884},[47,2238,350],{"class":272},[47,2240,1708],{"class":1707},[47,2242,1711],{"class":272},[47,2244,1714],{"class":884},[47,2246,350],{"class":272},[47,2248,1719],{"class":1707},[47,2250,1722],{"class":272},[47,2252,1725],{"class":1047},[47,2254,2255,2257,2259,2261],{"class":49,"line":560},[47,2256,1730],{"class":884},[47,2258,350],{"class":272},[47,2260,1735],{"class":1707},[47,2262,366],{"class":272},[47,2264,2265,2267],{"class":49,"line":566},[47,2266,1742],{"class":272},[47,2268,2269],{"class":265},");\n",[47,2271,2272],{"class":49,"line":572},[47,2273,65],{"emptyLinePlaceholder":64},[47,2275,2276],{"class":49,"line":578},[47,2277,2278],{"class":1047},"    \u002F\u002F register event listener\n",[47,2280,2281,2284,2286,2289,2291,2293,2296],{"class":49,"line":584},[47,2282,2283],{"class":265},"    map.addListener(",[47,2285,384],{"class":272},[47,2287,2288],{"class":884},"click",[47,2290,384],{"class":272},[47,2292,1711],{"class":272},[47,2294,2295],{"class":265},"(mapsMouseEvent)=>",[47,2297,342],{"class":272},[47,2299,2300,2302,2304,2307,2309,2312,2314],{"class":49,"line":590},[47,2301,2077],{"class":261},[47,2303,1660],{"class":272},[47,2305,2306],{"class":335},"clickOnMap",[47,2308,339],{"class":884},[47,2310,2311],{"class":265},"mapsMouseEvent",[47,2313,374],{"class":884},[47,2315,1246],{"class":272},[47,2317,2318,2320],{"class":49,"line":596},[47,2319,1742],{"class":272},[47,2321,2269],{"class":265},[47,2323,2325],{"class":49,"line":2324},34,[47,2326,65],{"emptyLinePlaceholder":64},[47,2328,2330,2333,2335],{"class":49,"line":2329},35,[47,2331,2332],{"class":265},"　　this.map ",[47,2334,319],{"class":272},[47,2336,2337],{"class":265}," map;\n",[47,2339,2341],{"class":49,"line":2340},36,[47,2342,1764],{"class":272},[47,2344,2346],{"class":49,"line":2345},37,[47,2347,599],{"class":272},[13,2349,2350,2353],{},[44,2351,2352],{},"map.addListener('click',(mapsMouseEvent)=>{...})"," is similar to adding the event to DOM. Insert the callback function to the second argument. By the way, the argument of callback contains automatically the map data like clicked position coordinate.",[13,2355,2356],{},"I register the click event listener has callback executes the below method to get clicked position coordinate.",[37,2358,2360],{"className":251,"code":2359,"filename":253,"language":254,"meta":42,"style":42},"clickOnMap(mapEvent){\n        console.log(mapEvent.latLng.toString())\n        this.position = mapEvent.latLng.toString();\n},\n",[44,2361,2362,2371,2394,2417],{"__ignoreMap":42},[47,2363,2364,2366,2369],{"class":49,"line":50},[47,2365,2306],{"class":335},[47,2367,2368],{"class":265},"(mapEvent)",[47,2370,342],{"class":272},[47,2372,2373,2376,2378,2380,2382,2384,2386,2388,2390,2392],{"class":49,"line":4},[47,2374,2375],{"class":265},"        console",[47,2377,308],{"class":272},[47,2379,2133],{"class":335},[47,2381,339],{"class":884},[47,2383,2120],{"class":265},[47,2385,308],{"class":272},[47,2387,2142],{"class":265},[47,2389,308],{"class":272},[47,2391,2147],{"class":335},[47,2393,2150],{"class":884},[47,2395,2396,2399,2401,2403,2405,2407,2409,2411,2413,2415],{"class":49,"line":61},[47,2397,2398],{"class":272},"        this.",[47,2400,2008],{"class":265},[47,2402,1654],{"class":272},[47,2404,2162],{"class":265},[47,2406,308],{"class":272},[47,2408,2142],{"class":265},[47,2410,308],{"class":272},[47,2412,2147],{"class":335},[47,2414,2070],{"class":884},[47,2416,1246],{"class":272},[47,2418,2419],{"class":49,"line":68},[47,2420,2421],{"class":272},"},\n",[13,2423,2424],{},"When clicking the map, the coordinate displayed. (ignore red point on the center..)",[122,2426],{":src":2427,":width":125},"'_mix\u002Fsch-2021-03-07-18.02.03-768x326.png'",[13,2429,2430],{},"The coordinate is displayed at the under left. Anyway, it is how register an event listener and obtain data of the map.",[29,2432,2434],{"id":2433},"drawing-the-line","Drawing the line.",[13,2436,2437,2438,2441],{},"Next, let's draw the line when clicking the map. To draw lines, you create a instance of ",[44,2439,2440],{},"google.maps.Polyline"," class and set the instance to the map instance.",[13,2443,2444],{},"You can obtain map data as above so let's draw the line when map rendered.",[37,2446,2448],{"className":251,"code":2447,"filename":253,"language":254,"meta":42,"style":42},"...  \nmounted(){\n  const map = new this.$gm.Map(document.getElementById('map'),{\n    center: { lat: 34.855273888888888, lng: 135.30649 },\n    zoom: 10,\n  });\n  map.addListener('click',(mapsMouseEvent)=>{\n    return this.clickOnMap(mapsMouseEvent);\n  });\n  const LINE = new this.$gm.Polyline({\n      path:[\n        { lat: 34.855273888888888, lng: 135.30649 },\n        { lat: 34.854465, lng: 135.8 },\n      ],\n      geodesic: true,\n      strokeColor: \"#FF0000\",\n      strokeOpacity: 1.0,\n      strokeWeight: 2,\n  })\n  LINE.setMap(map);\n  this.map = map;\n} \n...\n",[44,2449,2450,2458,2467,2506,2531,2542,2551,2581,2597,2605,2629,2639,2660,2682,2689,2701,2718,2730,2742,2748,2766,2779,2786],{"__ignoreMap":42},[47,2451,2452,2455],{"class":49,"line":50},[47,2453,2454],{"class":272},"...",[47,2456,2457],{"class":265},"  \n",[47,2459,2460,2463,2465],{"class":49,"line":4},[47,2461,2462],{"class":335},"mounted",[47,2464,2070],{"class":265},[47,2466,342],{"class":272},[47,2468,2469,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502,2504],{"class":49,"line":61},[47,2470,2471],{"class":357},"  const",[47,2473,1651],{"class":265},[47,2475,1654],{"class":272},[47,2477,1657],{"class":272},[47,2479,1660],{"class":272},[47,2481,1663],{"class":265},[47,2483,308],{"class":272},[47,2485,1289],{"class":335},[47,2487,339],{"class":884},[47,2489,1672],{"class":265},[47,2491,308],{"class":272},[47,2493,1297],{"class":335},[47,2495,339],{"class":884},[47,2497,384],{"class":272},[47,2499,1304],{"class":276},[47,2501,384],{"class":272},[47,2503,374],{"class":884},[47,2505,1689],{"class":272},[47,2507,2508,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529],{"class":49,"line":68},[47,2509,2510],{"class":884},"    center",[47,2512,350],{"class":272},[47,2514,1699],{"class":272},[47,2516,1702],{"class":884},[47,2518,350],{"class":272},[47,2520,1708],{"class":1707},[47,2522,1711],{"class":272},[47,2524,1714],{"class":884},[47,2526,350],{"class":272},[47,2528,1719],{"class":1707},[47,2530,1885],{"class":272},[47,2532,2533,2536,2538,2540],{"class":49,"line":74},[47,2534,2535],{"class":884},"    zoom",[47,2537,350],{"class":272},[47,2539,1735],{"class":1707},[47,2541,366],{"class":272},[47,2543,2544,2547,2549],{"class":49,"line":80},[47,2545,2546],{"class":272},"  }",[47,2548,374],{"class":884},[47,2550,1246],{"class":272},[47,2552,2553,2556,2558,2561,2563,2565,2567,2569,2572,2574,2576,2579],{"class":49,"line":85},[47,2554,2555],{"class":265},"  map",[47,2557,308],{"class":272},[47,2559,2560],{"class":335},"addListener",[47,2562,339],{"class":884},[47,2564,384],{"class":272},[47,2566,2288],{"class":276},[47,2568,384],{"class":272},[47,2570,2571],{"class":272},",(",[47,2573,2311],{"class":353},[47,2575,374],{"class":272},[47,2577,2578],{"class":357},"=>",[47,2580,342],{"class":272},[47,2582,2583,2585,2587,2589,2591,2593,2595],{"class":49,"line":91},[47,2584,1617],{"class":261},[47,2586,1660],{"class":272},[47,2588,2306],{"class":335},[47,2590,339],{"class":884},[47,2592,2311],{"class":265},[47,2594,374],{"class":884},[47,2596,1246],{"class":272},[47,2598,2599,2601,2603],{"class":49,"line":97},[47,2600,2546],{"class":272},[47,2602,374],{"class":884},[47,2604,1246],{"class":272},[47,2606,2607,2609,2612,2614,2616,2618,2620,2622,2625,2627],{"class":49,"line":102},[47,2608,2471],{"class":357},[47,2610,2611],{"class":265}," LINE",[47,2613,1654],{"class":272},[47,2615,1657],{"class":272},[47,2617,1660],{"class":272},[47,2619,1663],{"class":265},[47,2621,308],{"class":272},[47,2623,2624],{"class":335},"Polyline",[47,2626,339],{"class":884},[47,2628,342],{"class":272},[47,2630,2631,2634,2636],{"class":49,"line":108},[47,2632,2633],{"class":884},"      path",[47,2635,350],{"class":272},[47,2637,2638],{"class":884},"[\n",[47,2640,2641,2644,2646,2648,2650,2652,2654,2656,2658],{"class":49,"line":114},[47,2642,2643],{"class":272},"        {",[47,2645,1702],{"class":884},[47,2647,350],{"class":272},[47,2649,1708],{"class":1707},[47,2651,1711],{"class":272},[47,2653,1714],{"class":884},[47,2655,350],{"class":272},[47,2657,1719],{"class":1707},[47,2659,1885],{"class":272},[47,2661,2662,2664,2666,2668,2671,2673,2675,2677,2680],{"class":49,"line":481},[47,2663,2643],{"class":272},[47,2665,1702],{"class":884},[47,2667,350],{"class":272},[47,2669,2670],{"class":1707}," 34.854465",[47,2672,1711],{"class":272},[47,2674,1714],{"class":884},[47,2676,350],{"class":272},[47,2678,2679],{"class":1707}," 135.8",[47,2681,1885],{"class":272},[47,2683,2684,2687],{"class":49,"line":487},[47,2685,2686],{"class":884},"      ]",[47,2688,366],{"class":272},[47,2690,2691,2694,2696,2699],{"class":49,"line":493},[47,2692,2693],{"class":884},"      geodesic",[47,2695,350],{"class":272},[47,2697,2698],{"class":322}," true",[47,2700,366],{"class":272},[47,2702,2703,2706,2708,2711,2714,2716],{"class":49,"line":499},[47,2704,2705],{"class":884},"      strokeColor",[47,2707,350],{"class":272},[47,2709,2710],{"class":272}," \"",[47,2712,2713],{"class":276},"#FF0000",[47,2715,934],{"class":272},[47,2717,366],{"class":272},[47,2719,2720,2723,2725,2728],{"class":49,"line":505},[47,2721,2722],{"class":884},"      strokeOpacity",[47,2724,350],{"class":272},[47,2726,2727],{"class":1707}," 1.0",[47,2729,366],{"class":272},[47,2731,2732,2735,2737,2740],{"class":49,"line":511},[47,2733,2734],{"class":884},"      strokeWeight",[47,2736,350],{"class":272},[47,2738,2739],{"class":1707}," 2",[47,2741,366],{"class":272},[47,2743,2744,2746],{"class":49,"line":517},[47,2745,2546],{"class":272},[47,2747,392],{"class":884},[47,2749,2750,2753,2755,2758,2760,2762,2764],{"class":49,"line":523},[47,2751,2752],{"class":265},"  LINE",[47,2754,308],{"class":272},[47,2756,2757],{"class":335},"setMap",[47,2759,339],{"class":884},[47,2761,1304],{"class":265},[47,2763,374],{"class":884},[47,2765,1246],{"class":272},[47,2767,2768,2771,2773,2775,2777],{"class":49,"line":529},[47,2769,2770],{"class":272},"  this.",[47,2772,1304],{"class":265},[47,2774,1654],{"class":272},[47,2776,1651],{"class":265},[47,2778,1246],{"class":272},[47,2780,2781,2783],{"class":49,"line":534},[47,2782,371],{"class":272},[47,2784,2785],{"class":265}," \n",[47,2787,2788],{"class":49,"line":540},[47,2789,593],{"class":272},[13,2791,2792,2793,2796],{},"At the first, create a line instance with ",[44,2794,2795],{},"this.$gm.Polyline",". You can set line width, path (2 points needed), color, and so on with object.",[122,2798],{":src":2799,":width":125},"'_mix\u002Fsch-2021-03-10-21.17.39-768x346.png'",[13,2801,2802],{},"The red line is displayed. The above example is straight, but if you set detailed paths, you can draw as below.",[122,2804],{":src":2805,":width":2806,":center":754},"'_mix\u002Fsch-2021-03-10-21.19.41.png'","'300px'",[13,2808,2809],{},"I downloaded these coordinate data from my friend's phone GPS and that has detailed data coordinate as an array.",[29,2811,2813],{"id":2812},"drawing-lines-with-any-clikced-positions","Drawing lines with any clikced positions",[13,2815,2816],{},"Rendering the line at the initial dispaly is successful. Next, let's draw the line from point to point when the user clicked any position on the map.",[13,2818,2819],{},"You remember obtaining from click event, don't you? Applay it.",[2821,2822,2823,2826,2829,2832],"ol",{},[136,2824,2825],{},"Obtain latitude and longitude from clicked position.",[136,2827,2828],{},"Convert them to Google Map Coordinate instance.",[136,2830,2831],{},"Add the coordinate (path) to the line instance.",[136,2833,2834],{},"Execute it every clicking.",[13,2836,2837,2840],{},[44,2838,2839],{},"drawLine"," method I add to click event is below.",[37,2842,2844],{"className":251,"code":2843,"filename":253,"language":254,"meta":42,"style":42},"data(){\n  return{\n    map:undefined,\n    bounds:undefined,\n    path:[],\n    line:undefined\n  }\n},\nmethods:{\n  drawLine(mapEvent){\n    let latLng = mapEvent.latLng;\n\n    \u002F\u002F click 1st point\n    if(this.line === undefined){\n      const newLine = new this.$gm.Polyline({\n        path:[latLng],\n        geodesic: true,\n        strokeColor: \"#FF0000\",\n        strokeOpacity: 1.0,\n        strokeWeight: 2,\n      })\n      newLine.setMap(this.map);\n      this.path.push(latLng);\n      this.line = newLine;\n      return;\n    }\n\n    \u002F\u002F click second and later point\n    this.path.push(latLng);\n    this.line.setPath([...this.path]);\n    return;\n  },\n},\n",[44,2845,2846,2855,2862,2869,2876,2888,2895,2899,2903,2911,2924,2942,2946,2951,2973,2997,3014,3025,3040,3051,3062,3069,3088,3109,3121,3127,3131,3135,3140,3158,3182,3188,3192],{"__ignoreMap":42},[47,2847,2848,2851,2853],{"class":49,"line":50},[47,2849,2850],{"class":335},"data",[47,2852,2070],{"class":265},[47,2854,342],{"class":272},[47,2856,2857,2860],{"class":49,"line":4},[47,2858,2859],{"class":261},"  return",[47,2861,342],{"class":272},[47,2863,2864,2867],{"class":49,"line":61},[47,2865,2866],{"class":884},"    map",[47,2868,1627],{"class":272},[47,2870,2871,2874],{"class":49,"line":68},[47,2872,2873],{"class":884},"    bounds",[47,2875,1627],{"class":272},[47,2877,2878,2881,2883,2886],{"class":49,"line":74},[47,2879,2880],{"class":884},"    path",[47,2882,350],{"class":272},[47,2884,2885],{"class":884},"[]",[47,2887,366],{"class":272},[47,2889,2890,2893],{"class":49,"line":80},[47,2891,2892],{"class":884},"    line",[47,2894,2094],{"class":272},[47,2896,2897],{"class":49,"line":85},[47,2898,1764],{"class":272},[47,2900,2901],{"class":49,"line":91},[47,2902,2421],{"class":272},[47,2904,2905,2908],{"class":49,"line":97},[47,2906,2907],{"class":1377},"methods",[47,2909,2910],{"class":272},":{\n",[47,2912,2913,2916,2918,2920,2922],{"class":49,"line":102},[47,2914,2915],{"class":335},"  drawLine",[47,2917,339],{"class":884},[47,2919,2120],{"class":265},[47,2921,374],{"class":884},[47,2923,342],{"class":272},[47,2925,2926,2929,2932,2934,2936,2938,2940],{"class":49,"line":108},[47,2927,2928],{"class":357},"    let",[47,2930,2931],{"class":265}," latLng",[47,2933,1654],{"class":272},[47,2935,2162],{"class":265},[47,2937,308],{"class":272},[47,2939,2142],{"class":265},[47,2941,1246],{"class":272},[47,2943,2944],{"class":49,"line":114},[47,2945,65],{"emptyLinePlaceholder":64},[47,2947,2948],{"class":49,"line":481},[47,2949,2950],{"class":1047},"    \u002F\u002F click 1st point\n",[47,2952,2953,2956,2958,2961,2963,2966,2969,2971],{"class":49,"line":487},[47,2954,2955],{"class":261},"    if",[47,2957,339],{"class":884},[47,2959,2960],{"class":272},"this.",[47,2962,49],{"class":265},[47,2964,2965],{"class":272}," ===",[47,2967,2968],{"class":272}," undefined",[47,2970,374],{"class":884},[47,2972,342],{"class":272},[47,2974,2975,2978,2981,2983,2985,2987,2989,2991,2993,2995],{"class":49,"line":493},[47,2976,2977],{"class":357},"      const",[47,2979,2980],{"class":265}," newLine",[47,2982,1654],{"class":272},[47,2984,1657],{"class":272},[47,2986,1660],{"class":272},[47,2988,1663],{"class":265},[47,2990,308],{"class":272},[47,2992,2624],{"class":335},[47,2994,339],{"class":884},[47,2996,342],{"class":272},[47,2998,2999,3002,3004,3007,3009,3012],{"class":49,"line":499},[47,3000,3001],{"class":884},"        path",[47,3003,350],{"class":272},[47,3005,3006],{"class":884},"[",[47,3008,2142],{"class":265},[47,3010,3011],{"class":884},"]",[47,3013,366],{"class":272},[47,3015,3016,3019,3021,3023],{"class":49,"line":505},[47,3017,3018],{"class":884},"        geodesic",[47,3020,350],{"class":272},[47,3022,2698],{"class":322},[47,3024,366],{"class":272},[47,3026,3027,3030,3032,3034,3036,3038],{"class":49,"line":511},[47,3028,3029],{"class":884},"        strokeColor",[47,3031,350],{"class":272},[47,3033,2710],{"class":272},[47,3035,2713],{"class":276},[47,3037,934],{"class":272},[47,3039,366],{"class":272},[47,3041,3042,3045,3047,3049],{"class":49,"line":517},[47,3043,3044],{"class":884},"        strokeOpacity",[47,3046,350],{"class":272},[47,3048,2727],{"class":1707},[47,3050,366],{"class":272},[47,3052,3053,3056,3058,3060],{"class":49,"line":523},[47,3054,3055],{"class":884},"        strokeWeight",[47,3057,350],{"class":272},[47,3059,2739],{"class":1707},[47,3061,366],{"class":272},[47,3063,3064,3067],{"class":49,"line":529},[47,3065,3066],{"class":272},"      }",[47,3068,392],{"class":884},[47,3070,3071,3074,3076,3078,3080,3082,3084,3086],{"class":49,"line":534},[47,3072,3073],{"class":265},"      newLine",[47,3075,308],{"class":272},[47,3077,2757],{"class":335},[47,3079,339],{"class":884},[47,3081,2960],{"class":272},[47,3083,1304],{"class":265},[47,3085,374],{"class":884},[47,3087,1246],{"class":272},[47,3089,3090,3093,3096,3098,3101,3103,3105,3107],{"class":49,"line":540},[47,3091,3092],{"class":272},"      this.",[47,3094,3095],{"class":265},"path",[47,3097,308],{"class":272},[47,3099,3100],{"class":335},"push",[47,3102,339],{"class":884},[47,3104,2142],{"class":265},[47,3106,374],{"class":884},[47,3108,1246],{"class":272},[47,3110,3111,3113,3115,3117,3119],{"class":49,"line":545},[47,3112,3092],{"class":272},[47,3114,49],{"class":265},[47,3116,1654],{"class":272},[47,3118,2980],{"class":265},[47,3120,1246],{"class":272},[47,3122,3123,3125],{"class":49,"line":550},[47,3124,2077],{"class":261},[47,3126,1246],{"class":272},[47,3128,3129],{"class":49,"line":555},[47,3130,587],{"class":272},[47,3132,3133],{"class":49,"line":560},[47,3134,65],{"emptyLinePlaceholder":64},[47,3136,3137],{"class":49,"line":566},[47,3138,3139],{"class":1047},"    \u002F\u002F click second and later point\n",[47,3141,3142,3144,3146,3148,3150,3152,3154,3156],{"class":49,"line":572},[47,3143,2155],{"class":272},[47,3145,3095],{"class":265},[47,3147,308],{"class":272},[47,3149,3100],{"class":335},[47,3151,339],{"class":884},[47,3153,2142],{"class":265},[47,3155,374],{"class":884},[47,3157,1246],{"class":272},[47,3159,3160,3162,3164,3166,3169,3172,3175,3177,3180],{"class":49,"line":578},[47,3161,2155],{"class":272},[47,3163,49],{"class":265},[47,3165,308],{"class":272},[47,3167,3168],{"class":335},"setPath",[47,3170,3171],{"class":884},"([",[47,3173,3174],{"class":272},"...this.",[47,3176,3095],{"class":265},[47,3178,3179],{"class":884},"])",[47,3181,1246],{"class":272},[47,3183,3184,3186],{"class":49,"line":584},[47,3185,1617],{"class":261},[47,3187,1246],{"class":272},[47,3189,3190],{"class":49,"line":590},[47,3191,1636],{"class":272},[47,3193,3194],{"class":49,"line":596},[47,3195,2421],{"class":272},[13,3197,3198,3199,3202,3203,3205,3206,3209,3210,3213],{},"When first clicking, create the instance and store it into ",[44,3200,3201],{},"data()",". Insert coordinate data to ",[44,3204,3095],{}," every clicking. And expand the path array with ",[44,3207,3208],{},"this.line.setPath([...this.path])"," and update instance's path. So it will draw the line from point to point with every click. I have written the character ",[17,3211,3212],{},"VALUE"," on the map with one line (^^).",[122,3215],{":src":3216,":width":125},"'_mix\u002Fscp-2021-03-10-21.42.12-768x408.png'",[13,3218,3219],{},"If you reset the last path, that will be an undo function. If you change any path, also will be line editing function. Google Map API has many other functions to make the rich map.",[29,3221,3223],{"id":3222},"is-not-vue-needed","Is not Vue needed??",[13,3225,3226],{},"Yes. You can make it without vue.js. Most functions are developed with Object and methods of Google map javascript api. So you can make it only with Vanilla.js. But because I have developed app with vue.js, I just used it.",[29,3228,3230],{"id":3229},"lets-try-othe-functions","Let's try othe functions!",[13,3232,3233],{},"Google Map API has any other functions. Examples, adding the maker or custom design maker and also inserting DOM element to the map. If saving these rendering data (path or maker position) as JSON and store in DB, we can create sharing map application as an example. I will try and research Google Map API. Thank you for your reading!",[766,3235,3236],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":42,"searchDepth":61,"depth":61,"links":3238},[3239,3240,3244,3245,3246,3247,3248,3249],{"id":808,"depth":4,"text":809},{"id":838,"depth":4,"text":839,"children":3241},[3242,3243],{"id":857,"depth":61,"text":858},{"id":1213,"depth":61,"text":1214},{"id":1474,"depth":4,"text":1475},{"id":1933,"depth":4,"text":1934},{"id":2433,"depth":4,"text":2434},{"id":2812,"depth":4,"text":2813},{"id":3222,"depth":4,"text":3223},{"id":3229,"depth":4,"text":3230},[783],"Drawing routes on Google Map with Google Maps API and Vue.js",{},"\u002Fen\u002Farticles\u002Fgoogle-map-vuejs",{"title":800,"description":3251},"en\u002Farticles\u002Fgoogle-map-vuejs",[794,277],"_mix\u002Fscp-2021-03-10-21.42.12-768x408.png","e3OhGlnl1sX9IYuWMsptHFjFwBdJSkLcFZlc_d3i3s4",1780987140115]