vue2-google-maps how to use Embed API "place mode"

Question

I'm using the google maps javascript api in vue2-google-maps . My project is working just fine, the only issue is that I'm exceeding my request quota.

As described here https://developers.google.com/maps/documentation/embed/guide#basic_map_modes I can use the "place mode" or "view mode" to get unlimited usage. Those modes work just fine for what I need.

Does anybody know how I can set them up in my vuejs2 project?

Answer 1

It looks like vue2-google-maps doesn't support Embed API place mode integration, but all you need to do to use this API is to call it within an iframe.

Try this simple jsfiddle with your own API key: https://jsfiddle.net/98ebrhoy/

<div id="app">
  <map></map>
</div>

Vue.component('map', {
  template: '<h1>Map</h1><iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=&q=Space+Needle,Seattle+WA"></iframe>'
});

var vm = new Vue({
  el: '#app'
});

Hope this helps.