Map added

src/components/index.vue

@@ -15,23 +15,24 @@
 </template>
 
 <style scoped>
+
 </style>
 
 <script>
-import ModelViewComponent from "./model-view.vue";
-import MapComponent from "./map.vue";
-import ControlComponent from "./control.vue";
+    import ModelViewComponent from "./model-view.vue";
+    import MapComponent from "./map.vue";
+    import ControlComponent from "./control.vue";
 
-export default {
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-  components: {
-    ModelViewComponent: ModelViewComponent,
-    ControlComponent: ControlComponent,
-    MapComponent: MapComponent
-  }
-};
+    export default {
+        data() {
+            return {};
+        },
+        computed: {},
+        methods: {},
+        components: {
+            ModelViewComponent: ModelViewComponent,
+            ControlComponent: ControlComponent,
+            MapComponent: MapComponent
+        }
+    };
 </script>

src/components/map.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="border border-secondary rounded h-100">
-        <p>Map</p>
+        <div id="map" class="h-100 w-100"></div>
     </div>
 </template>
 
@@ -9,12 +9,19 @@
 </style>
 
 <script>
-export default {
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {},
-  components: {}
-};
+  export default {
+      data() {
+          return {};
+      },
+      mounted: function() {
+          var uluru = { lat: 65.011543, lng: 25.468772 };
+          var map = new google.maps.Map(document.getElementById("map"), {
+              zoom: 16,
+              center: uluru
+          });
+      },
+      computed: {},
+      methods: {},
+      components: {}
+  };
 </script>

src/index.html

@@ -19,6 +19,8 @@
     crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
     crossorigin="anonymous"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOe9dKqs4SncEEOg5hAFDULxOlkGcsu6Y"></script>
+
 
 </body>