JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw2Hq8jGrOvzy7arACbXM8ZW3DpOM9BhM&callback=initMap"></script>

CSS

#map {
   height: 100%;
   width: 100%;
 }

 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }

JavaScript

// Replace this data with actual church coordinates (latitude and longitude) for the United Kingdom.
var churches = [{
    lat: 51.5074,
    lng: -0.1278,
    name: 'All Saints\' Church, Wing'
  },
  {
    lat: 53.4808,
    lng: -2.2426,
    name: 'Church 2'
  },
  {
    lat: 52.4862,
    lng: -1.8904,
    name: 'Church 3'
  }
];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 53.4808,
      lng: -1.2426
    }
  });

  churches.forEach(function(church) {
    var marker = new google.maps.Marker({
      position: {
        lat: church.lat,
        lng: church.lng
      },
      map: map,
      title: church.name
    });
  });
}


const apiKey = 'AIzaSyCw2Hq8jGrOvzy7arACbXM8ZW3DpOM9BhM'; // Replace with your actual API key
const baseUrl = 'https://maps.googleapis.com/maps/api/place';

async function getChurches(latitude, longitude, radius) {
  const endpoint = `${baseUrl}/nearbysearch/json`;
  const params = new URLSearchParams({
    key: apiKey,
    location: `${latitude},${longitude}`,
    radius: radius,
    type: 'church'
  });

  const response = await fetch(`${endpoint}?${params}`);
  const data = await response.json();

  const churches = data.results.map((result) => ({
    lat: result.geometry.location.lat,
    lng: result.geometry.location.lng,
    name: result.name
  }));

  return churches;
}


getChurches(53.4808, -2.2426, 50000)
  .then(churches => console.log(churches))
  .catch(error => console.error('Error fetching churches:', error));