I recently started working on a basic Vue project.
The project involves integrating a Google Map using the vue2-google-maps package.
Additionally, I have a JSON file (or data.php) containing the following information:
{
"locations": [
{
"name": "Location 1",
"address": "215 West Girard Avenue 19123",
"location": {
"lat": "39.9695601",
"lng": "-75.1395161"
},
"label": "200",
"preview": "img-1.png"
},
{ ...
In the template section of the GoogleMap.vue file:
<template>
<div class="container">
<gmap-map id="map" v-bind="options">
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
:label="m.label"
@click="openWindow"
/>
<gmap-info-window
@closeclick="window_open=false"
:opened="window_open"
:position="infowindow"
:options="{
pixelOffset: {
width: 0,
height: 0
}
}"
>
Hello world!
</gmap-info-window>
</gmap-map>
</div>
</template>
Within the GoogleMap.vue script:
import { gmapApi } from "vue2-google-maps";
export default {
name: "GoogleMap",
data() {
return {
//map: null,
options: {
zoom: 12,
center: {
lat: 39.9995601,
lng: -75.1395161
},
mapTypeId: "roadmap"
},
markers: [
{
label: "200",
position: { lat: 39.9695601, lng: -75.1395161 }
},
{
label: "30",
position: { lat: 40.034038, lng: -75.145223 }
},
{
label: "45",
position: { lat: 39.9713524, lng: -75.159036 }
}
],
info_marker: null,
infowindow: {
lat: 39.9995601,
lng: -75.1395161
},
window_open: false
};
},
computed: {
google: gmapApi
},
watch: {},
methods: {
initialize() {
console.log("init");
},
openWindow() {
console.log(this);
this.window_open = true;
}
},
mounted: function() {
this.initialize();
}
};
............................................................................................................................................................................................................
Question: What is the best way to populate the markers: [ { array with values from the data.php file (such as lat, lng, label)?