Vue.js props and components with Google Maps -- help

1

Hi campers,

I’m learning Vue.js and absolutely love it. I’m trying to build a city search app and so far have accessed some json data to retrieve USA city names and info. Now I want to embed a google map and want to pass in the retrieved city name into the search query, It doesn’t seem to work.

I’m accessing the city name in the modal box component that I have built - it shows up in the header title, but when I then do the same interpolation for the embed link for the map, it doesn’t work. See code below for what I mean:

It is referenced as the {{ title }} variable. The word “title” gets passed through, which is not what I want.

For the full code, please see my github proj – > https://github.com/JackEdwardLyons/vue-city-app

**Thank you in advance :slight_smile: **

// component code
<section class="modal-card-body">

       <iframe width="100%" height="350" frameborder="0" style="border:0"
                  src="https://www.google.com/maps/embed/v1/place?q={{title}},United+States&key=AIzaSyBh0g0ArtnfdANIyo-xH8v61n2bxrhMdME">
          </iframe>

    </section>

// HTML code
<!-- Map Modal -->
     <modal v-show="showMap" 
         @close="showMap = !showMap"
          :title="city.city">
           <!-- bind title to city name in component -->
     </modal>
<!-- end Map Modal -->
```
2

The issue is attributes in your HTML/Template can only take dynamic JS in their values if you v-bind them.

:src="'urlString' + {{ title }} + 'continuation of string'"

Note carefully how within the quotes, you’re now passing in JS, so you have to use string quotes as well.

I would suggested keeping it cleaner by creating a computed value to assemble the url, possibly with an ES6 string template if your browser needs can handle it.

// In HTML/template:
<iframe :src="iframeUrl"></iframe>
// In Vue component:
computed: {
  iframeUrl: function () {
      return `https://www.google.com/maps/embed/v1/place?q=${this.title},United+States&key=AIzaSyBh0g0ArtnfdANIyo-xH8v61n2bxrhMdME`
}
}
1 Like
3

Awesome man, thanks a lot that is exactly what I wanted :slight_smile:

1 Like
4

Actually, I’ve just noticed a second bug from this. While your code does what it needs to, If there are multiple results, the city name will default as the last city in the list.

I think this has to do with the city name not carrying through the correct index from the original cities array.

For example: a search of Los returns 2 results: Los Angeles and Rancho Palos Verdes.

The title attribue is then bound to the last city name – do you think I need to do some sort of extra for loop to carry through the index as well?

I created a pen for this, but the image assets dont show, however things are still clickable.

https://codepen.io/JackEdwardLyons/pen/MmzgQx

5

I’ve tried something like this, but no luck :frowning:

iframeUrl: function() {
      let cityArray = [];
      cityArray.push(this.title)
      console.log( cityArray );
      return cityArray.forEach( name => `https://www.google.com/maps/embed/v1/place?q=${name},United+States&key=AIzaSyBh0g0ArtnfdANIyo-xH8v61n2bxrhMdME`);
}
6

Mm, I didn’t really get deep in your code, but looking mostly at the JS in the codepen, I think you should work through it all again on your own. I see lots of things that don’t make perfect sense to me…

  1. In your methods, you create some local and instance-wide (this._) variables you don’t use (and have not initialized in the data section).
  2. Also, it seems the city list is you get with axios is not dynamic based on a variable, just a list. But you are running that method every time the user does a key-up on the input. If it is a static list you are looking for matches against, consider just loading it once with the mounted() lifecycle hook. … The addCity function seems superfluous. If you’re using v-model you probably don’t need a key-up event.
  3. You pass city.city to the modal as the title prop, but I don’t see where that comes from. Shouldn’t it be the result of the filteredCities computed value–which will return an array, not a value unless you add an index to the end of it.
1 Like
7

Awesome points to consider, and thanks for really giving some good advice. There’s a lot to learn! Thanks