Transfer values from json file to vue2 google maps markers

3
votes

I have a simple vue project.

There is a google map that I connect using vue2-google-maps.

And there is json file (or rather data.php) :

{
  "locations": [
    {
      "name": "Location 1",
      "adress": "215 West Girard Avenue 19123",
      "location": {
        "lat": "39.9695601",
        "lon": "-75.1395161"
      },
      "lable": "200",
      "prev": "img-1.png"
    },
    { ...

File GoogleMap.vue --> template:

<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>

File 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: How to markers: [ { transfer values from data.php (lat, lng, lable)?

1
javascriptgoogle-mapsvue.jsvuejs2
data.php contains no PHP and has only a JSON object in it. Why does the file have the .php extension instead of .json? - tony19
@tony19, this is my personal task. I thought it doesn't matter, but I see that it's important. With json codesandbox.io/embed/5vq9q3kqmk ) P.S: Sorry for my english - HamSter
It matters because the extension of the imported file determines which webpack loader is used and how you import the data. Plus, it just doesn't make sense to give a file an extension that doesn't apply. If the correct file extension were used, you'd be able to take advantage of IDE syntax highlighting, formatting, and linting specifically for .json files. - tony19

1 Answers

4
votes

Import the JSON file like so:

import { default as locations } from '/path/to/json/file.json`

Then, you can create a markers computed property:

computed: {
  markers() {
    return locations.map(({ label, location: { lat, lon }}) => ({
     label,
     position: {
       lat: Number.parseFloat(lat),
       lng: Number.parseFloat(lon)
     }
    }))
  }
}

There are a couple of things to be corrected:

  • address is misspelled in the JSON file.
  • label is misspelled in the JSON file.

Edit:

If a php file is used, apparently you'll need to use JSON.parse.

Revised CodeSandbox