google maps working

This commit is contained in:
Jacob Delgado 2023-11-20 21:31:31 -08:00
parent 0b243292e2
commit ed6cc24b67
3 changed files with 7 additions and 8 deletions

View File

@ -2,7 +2,7 @@ import React from 'react';
import GoogleReviews from './google_reviews'; import GoogleReviews from './google_reviews';
const App = () => { const App = () => {
const apiKey = 'AIzaSyDO7qlVQWRJGsW7dX1D9DFEMlTO4YsKBLI'; // Replace with your Google API key const apiKey = 'AIzaSyClfOGrkQNRjDFzvnTk-W7Oeh-yyDNCXN0'; // Replace with your Google API key
const placeId = 'ChIJQ-7Uc0BitocRQZASTWUyN04'; // Replace with the Google Place ID of the location const placeId = 'ChIJQ-7Uc0BitocRQZASTWUyN04'; // Replace with the Google Place ID of the location
return ( return (

View File

@ -182,7 +182,6 @@ export default function Home() {
priority priority
fill fill
style={{ style={{
width: "100%",
objectPosition: "center", objectPosition: "center",
objectFit: "contain", objectFit: "contain",
}} }}
@ -239,7 +238,6 @@ export default function Home() {
priority priority
fill fill
style={{ style={{
width: "100%",
objectPosition: "center", objectPosition: "center",
objectFit: "contain", objectFit: "contain",
}} }}
@ -277,7 +275,6 @@ export default function Home() {
priority priority
fill fill
style={{ style={{
width: "100%",
objectPosition: "center", objectPosition: "center",
objectFit: "contain", objectFit: "contain",
}} }}
@ -288,7 +285,7 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="w-full h-[80svh] bg-blue-300"> <div className="w-full h-[80svh] bg-blue-300">
<GoogleReviews /> {/* <GoogleReviews /> */}
<MapComponent /> <MapComponent />
</div> </div>
{/* <div className="flex flex-col w-full h-[180vh]"> {/* <div className="flex flex-col w-full h-[180vh]">

View File

@ -1,3 +1,4 @@
"use client";
import React from 'react' import React from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'; import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
@ -7,14 +8,15 @@ const containerStyle = {
}; };
const center = { const center = {
lat: -3.745, lat: 36.10787615076762,
lng: -38.523 lng: -95.70694833561868,
}; };
function MyComponent() { function MyComponent() {
const { isLoaded } = useJsApiLoader({ const { isLoaded } = useJsApiLoader({
id: 'google-map-script', id: 'google-map-script',
googleMapsApiKey: "YOUR_API_KEY" googleMapsApiKey: "AIzaSyClfOGrkQNRjDFzvnTk-W7Oeh-yyDNCXN0"
}) })
const [map, setMap] = React.useState(null) const [map, setMap] = React.useState(null)