C A achingachris

## GoogleMap.vue
<template>
  <div class="container">
    <div>
      <h2 class="text-center">Google Map Nuxt.js</h2>
      <label class="form-label">
        <gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>
        <button @click="addLocationMarker" class="btn btn-primary">Get Location</button>
      </label>
      <br />
    </div>

## method.js
 methods: {
    initMarker(loc) {
      this.existingPlace = loc;
    },
    addLocationMarker() {
      if (this.existingPlace) {
        const marker = {
          lat: this.existingPlace.geometry.location.lat(),
          lng: this.existingPlace.geometry.location.lng(),
        };

## TileLayer.jsx
<TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

## OpenStreetMap.js
import React, { useState, useRef } from 'react'
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'

const OpenStreetMap = () => {
  const [center, setCenter] = useState({ lat: -4.043477, lng: 39.668205 })
  const ZOOM_LEVEL = 9
  const mapRef = useRef()

  return (

## hi.js
  {team.map((member) => (
  <ProfileCard
    key={member.id}
    image_url={member.image_url}
    name={member.name}
    title={member.title}
  />
))}

## 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>images lazyload</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"

## video_urls.js
  const video_urls = [
    {
      id: 1,
      title: 'Video One',
      video_url:
        'https://res.cloudinary.com/chris101/video/upload/v1645684691/video_1.mp4',
    },
    {
      id: 2,
      title: 'Video Two',

## index.js
import React from 'react'
// Import from an installed package - Bootsrap
import 'bootstrap/dist/css/bootstrap.min.css'

const IndexPage = () => {
  // video urls
  const video_urls = [
    {
      id: 1,
      title: 'Video One',

## Navigation.js
const Navigation = () => {
  return (
    <div>
      <nav className='navbar navbar-expand-lg bg-light'>
        <div className='container-fluid'>
          <a className='navbar-brand' href='/'>
            ChrisDevCode
          </a>
          <button
            className='navbar-toggler'

## Footer.js
const Footer = () => {
  return (
    <div className='container'>
      <footer className='d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top'>
        <div className='col-md-4 d-flex align-items-center'>
          <a
            href='/'
            className='mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1'
          >
            <svg className='bi' width={30} height={24}>
	<template>
	<div class="container">
	<div>
	<h2 class="text-center">Google Map Nuxt.js</h2>
	<label class="form-label">
	<gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>
	<button @click="addLocationMarker" class="btn btn-primary">Get Location</button>
	</label>
	<br />
	</div>
	methods: {
	initMarker(loc) {
	this.existingPlace = loc;
	},
	addLocationMarker() {
	if (this.existingPlace) {
	const marker = {
	lat: this.existingPlace.geometry.location.lat(),
	lng: this.existingPlace.geometry.location.lng(),
	};
	<TileLayer
	attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
	/>
	import React, { useState, useRef } from 'react'
	import { MapContainer, TileLayer, Marker } from 'react-leaflet'
	import 'leaflet/dist/leaflet.css'

	const OpenStreetMap = () => {
	const [center, setCenter] = useState({ lat: -4.043477, lng: 39.668205 })
	const ZOOM_LEVEL = 9
	const mapRef = useRef()

	return (
	{team.map((member) => (
	<ProfileCard
	key={member.id}
	image_url={member.image_url}
	name={member.name}
	title={member.title}
	/>
	))}
	<!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>images lazyload</title>
	<!-- CSS only -->
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
	const video_urls = [
	{
	id: 1,
	title: 'Video One',
	video_url:
	'https://res.cloudinary.com/chris101/video/upload/v1645684691/video_1.mp4',
	},
	{
	id: 2,
	title: 'Video Two',
	import React from 'react'
	// Import from an installed package - Bootsrap
	import 'bootstrap/dist/css/bootstrap.min.css'

	const IndexPage = () => {
	// video urls
	const video_urls = [
	{
	id: 1,
	title: 'Video One',
	const Navigation = () => {
	return (
	<div>
	<nav className='navbar navbar-expand-lg bg-light'>
	<div className='container-fluid'>
	<a className='navbar-brand' href='/'>
	ChrisDevCode
	</a>
	<button
	className='navbar-toggler'