So I have a search box, and after I click "enter", I want to display the photo of the place I've just chose.
I don't really know how to do that, and after some searches on the internet, I've found out of getPlaceDetails API.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test-jest</title>
<script type="text/JavaScript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
My App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/search">Search</router-link>
</div>
<router-view/>
</div>
</template>
And finally, the superstar, my Search component:
<template>
<div id="search-wrapper">
<div>
<input id="search-input" ref="vue_google_autocomplete"
placeholder="Search"
class="search-location"
onfocus="value = ''"
type="text" />
</div>
</div>
</template>
<script>
export default {
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
(this.$refs.vue_google_autocomplete),
{types: ['geocode'],componentRestrictions: {country: "us"}}
);
this.autocomplete.addListener('place_changed', () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
let lat = place.geometry.location.lat();
let lon = place.geometry.location.lng();
var city = ac[0]["short_name"];
var country = ac[3]["long_name"];
console.log(`You're going to ${city}, which is in ${country}`);
console.log(ac);
});
}
}
</script>
Can someone please help me to to display the photo of the place I'm looking for?
Places are defined within this API as establishments, geographic locations, or prominent points of interest. Most roads etc. do not return images.
Source: https://developers.google.com/places/web-service/intro
Check if your response has an photos[] array, the photo's should be there if it matches the above defined places.
Related
I am following microsoft online Vue tuturial. But following code should be outputting as below html page:
But I am getting this as output not sure why.
Why productName and productDescription are not appearing as string values?
index.js:
const app = Vue.createApp({
data() {
return {
productName: 'Book a Cruise to the Moon',
productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
// additional properties later
};
},
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Relecloud Galaxy Tours</title>
<link rel="stylesheet" href="./assets/styles.css" />
<!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="nav-bar"></div>
<h1>Relecloud Galaxy Tours</h1>
<!-- TODO: Add information display -->
<div id="app">
<h2>{{ productName }}</h2>
<div>{{ productDescription }}</div>
</div>
<!-- TODO: Import Vue app -->
<script src="./index.js"></script>
<script>
app.mount('#app');
</script>
</body>
</html>
I tested your code on my computer and it worked for me.
Make sure the file path is correct and try again.
I just copied and pasted.
as i said in the title, i'm using an api, here is the html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<title>Ejemplo consumo web service con FETCH </title>
</head>
<body>
< <div class="container">
<div class="row">
<button class="btn btn-primary" id="btn-cargar">Cargar Información</button>
</div>
<div class="row">
<div id="info" class="text-center">
<h1></h1>
</div>
</div>
</div>
<script src="js/carga_1.js"></script>
</body>
</html>
and here is the code of the js
$("#btn-cargar").click(function (event) {
event.preventDefault();
var url = "https://api.punkapi.com/v2/beers/random";
fetch(url)
.then(response => response.json())
.then(data =>
{
var $nombre_cerveza = $('<h1>').text(data[0].name);
var $grados = "Grados: " + $('<p>').text(data[0].abv);
var $foto_cerveza = $("<p><img src='"+data[0].image_url+"'>");
$("#info").empty();
$('#info')
.append($nombre_cerveza)
.append($grados)
.append($foto_cerveza);
})
.catch(error => console.error(error));
});
it shows me the name as it should, but in the abv it shows "Grados: [object Object]" and i want it to show the abv in numbers, does anyone knows a way to fix this?
i'm sorry that all of it is in spanish
I have an old project and I want to use Vue to make some fields of one of the forms be shown or hidden, I'm importing Vue from CDN and initializing a new Vue app, I've tried setting an id to the body of the project, but it does not work, then I created a div inside the body section wrapping all existing code, but the result is all the content is gone and gives a blank page. If i initialize Vue with the form id now the form is blank.
I've checked that Vue is imported adding a console.log in created lifecycle and it works, the problem is old content of page is missing when I wrap it with id specified in Vue initialization.
Here's my code:
const vueApp = new Vue({
el: '#my-form',
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
},
created() {
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</body>
</html>
I've tried wrapping parts of code with different div IDs but it never works.
I want to know if it is possible to use Vue in my use case and how to achieve it.
Thanks.
EDIT 1:
I've added some code to current snippet, but I dont't know why it works in the snippet and not in my working code.
It's missing the creation of the Vue component, and the div with the initialisation element id and the vue components tags.
The initialisation part of Vue looks good to me, just make sure to happen after the components are defined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<div id="my-form">
<my-form></my-form>
</div>
<script>
Vue.component('my-form', {
template:`
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>`,
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
}
})
const vueApp = new Vue({
el: '#my-form',
created(){
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
}
})
</script>
</body>
</html>
this should work!
data(){return{}} is needed when you are creating Vue.component, in case of new Vue you need data:{}
Try data:{} instead of data(){return{}} like this:
const vueApp = new Vue({
el: '#my-form',
data: {
selectedProductType: "Producto 3x2 o 2x1"
}
})
It looks like I just needed to set Vue in head section instead of the end of body tag, I added Vue from CDN:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
And then, I initilized it after all components were loaded in the bottom of body tag.
I always build my SPA apps with the vue-cli.
This time I'm building a small project and I'm incluing Vue with a script tag.
But I don't understand the following behavior.
// app.js
Vue.component('todo-item', {
template: `<div>Todo Component!</div>`
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue App!'
}
})
The HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
<div>
Just some content...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
The result is this:
Now, I'll try to add '<todo-item />' Component inside the HTML:
<div id="app">
{{ message }}
<todo-item />
<div>
Just some content...
</div>
</div>
The text 'Just some content...' disappeared:
What Am I doing wrong?
TL;DR;
instead of <todo-item/> use <todo-item></todo-item>
Un-compiled vue.js does not support self-closing html tags.
see style guide:
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
https://v2.vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended
and issues in github:
https://github.com/vuejs/vue/issues/1036
https://github.com/vuejs/vue/issues/8664
I'm developing my application with riot.js and I want to use dropzone(http://www.dropzonejs.com/).
In my code:
index.html below,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<app></app>
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
app.tag below,
var route = require('riot-route'); require("dropzone"); require('./main/home.tag'); require('./main/contents1.tag');
<app>
<main>
<contents></contents>
</main>
<script>
route(function(tagName) {
tagName = tagName || 'home'
riot.mount('contents', tagName)
})
route.start(true)
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
</app>
home.tag below,
<home>
<div class="search-box"></div>
</home>
Then, I add <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form> into app.tag like this, it works right.
<contents></contents>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
but, I add it into home.tag like this,
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</home>
it doesn't work. Can anyone help me??
Try to update DropZone when mounting the tag, using on('mount', or also you can try with on('updated',
<home>
<div class="search-box"></div>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
this.on('mount', function(){
new Dropzone(".dropzone");
})
</script>
</home>