I am using google maps API, and have created a Component to display the map.
index.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
window.show_google_map = false;
console.log(window.show_google_map);
function initMap() {
console.log('map loaded');
window.show_google_map = true;
console.log(window.show_google_map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap"
type="text/javascript"></script>
</body>
</html>
GoogleMap.vue:
<template>
<div class="google_map" :id="map_name"></div>
</template>
<script>
export default {
name: 'google_map',
props: ['map_id'],
data() {
return {
map_name: this.map_id + '-map',
}
},
methods: {
create_map() {
const element = document.getElementById(this.map_name);
const options = {
zoom: 14,
center: new google.maps.LatLng(51.501527, -0.1921837)
};
const map = new google.maps.Map(element, options);
const position = new google.maps.LatLng(51.501527, -0.1921837);
const marker = new google.maps.Marker({
position,
map
});
}
},
mounted() {
this.create_map();
}
}
</script>
The problem is, the component is rendered before the google maps API is loaded. How can I display after the google maps API has been loaded?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
