CODEWITHSUNDEEP
javascriptgoogle-mapsvue.js
The Extendable
The Extendable

Reputation: 61

How to call a method of Vue js by clicking a button from inside the google map

I am using a package named vue-google-maps for developing an application.

I added a code snippet for adding few button inside the map but when I click on the button then it does not call any method of vue. How may I solve the problem

Here is my code

let search_result = document.createElement('div');
search_result.style.width = '300px';
search_result.style.margin = '10px';
search_result.style.fontSize = '16px';
search_result.style.backgroundColor = '';
search_result.style.cursor = 'pointer';
search_result.innerHTML = ' <button @click="test()" class="btn-primary" id="reset"><i class="fa fa-refresh" aria-hidden="true"></i> Reset </button>
<button @click="handleUndo()" class="btn-primary" id="undo"><i class="fa fa-undo" aria-hidden="true"></i> Undo </button>
<button @click="polygon_redo()" class="btn-primary" id="redo"><i class="fa fa-repeat" aria-hidden="true"></i> Redo </button> ';

this.$refs.gmap.$mapObject.controls[google.maps.ControlPosition.TOP_RIGHT].push(search_result);

drawingManager.setMap(this.$refs.gmap.$mapObject)

Problem: When I click on the undo, redo, reset button then it does not call any method's of vue js.

I need suggestion, how may I add button or any pop up inside the google map who can interact with vue instance properties or methods, it would be two way data binding

Thanks

Upvotes: 1

Views: 481

Answers (1)

Jan Franciszek Cieślak
Jan Franciszek Cieślak

Reputation: 818

In Vue, you should never add markup by createElement method (or in any other way directly from script). Generally, markup should be in your <template>. The markup you created is not reactive or accessible by Vue, because it was added outside of the component initialization scope. Check out Vuejs docs for more detail: https://v2.vuejs.org/v2/guide/syntax.html

To solve you problem in a valid "Vue way", you need to show more content, preferably a full component.

Upvotes: 1

Related Questions