Long story short we are putting together a website page for a kid that’s missing. Basically, someone can go on this page, enter their address and then it will mark an area to show they have checked their web cams. I have set up an API through Google cloud, set the permissions to what they need to be, set up my database in Firebase nd then coded that in however when the person picks their house it doesn’t retain that marker. So you refresh and its gone. In the console on Firebase I can see that no information is being logged so of course nothing is there to return to the site. Below is my code. Please help!
type here<!DOCTYPE html>
<html>
<head>
<title>Community Search Map</title>
<style>
/* Style to ensure the map uses the full width and a fixed height */
#map {
height: 400px;
width: 100%;
}
/* Style the input boxes and button for better alignment and visibility */
.input-field, button {
margin-top: 10px;
width: 300px; /* Adjust width as necessary */
padding: 10px;
display: block; /* Stack the input fields vertically */
}
</style>
<script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.11.0/firebase-database.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyDY1hBVloKhVCIylwNlzwBqPBbhWzKnkHY",
authDomain: "zayden-421218.firebaseapp.com",
databaseURL: "https://zayden-421218-default-rtdb.firebaseio.com",
projectId: "zayden-421218",
storageBucket: "zayden-421218.appspot.com",
messagingSenderId: "44335894652",
appId: "1:44335894652:web:ecdc053194782b4655f9f9",
measurementId: "G-W925JW9SDF"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwGs-tc3ujSE5ajOrmVr1pvlNORfIVAr8&libraries=places&callback=initMap" async defer></script>
<script>
let map;
let geocoder;
let autocomplete;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 27.8503, lng: -82.135} // Centers the map on Fish Hawk, Florida
});
geocoder = new google.maps.Geocoder();
// Setup the Autocomplete
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('address'),
{types: ['geocode']}
);
fetchMarkers();
}
function fetchMarkers() {
const markersRef = firebase.database().ref('markers');
markersRef.on('value', (snapshot) => {
const markers = snapshot.val();
if (markers) {
Object.keys(markers).forEach((key) => {
const markerData = markers[key];
const marker = new google.maps.Marker({
position: {lat: markerData.lat, lng: markerData.lng},
map: map,
title: markerData.note
});
const infoWindow = new google.maps.InfoWindow({
content: `<h3>Note:</h3><p>${markerData.note}</p>`
});
marker.addListener('click', () => {
infoWindow.open(map, marker);
});
});
}
});
}
function geocodeAddress() {
const address = document.getElementById('address').value;
const note = document.getElementById('note').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
const marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// Create an info window to display the note
const infoWindow = new google.maps.InfoWindow({
content: `<h3>Note:</h3><p>${note}</p>`
});
// Add listener to marker to show info window when marker is clicked
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
// Save the marker in Firebase
const markersRef = firebase.database().ref('markers').push();
markersRef.set({
lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng(),
note: note
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body>
<div>
<input type="text" id="address" class="input-field" placeholder="Enter Address Here">
<input type="text" id="note" class="input-field" placeholder="Enter a note for this location">
<button onclick="geocodeAddress()">Mark Searched Area</button>
</div>
<div id="map"></div> <!-- The map will appear here -->
</body>
</html>
I’ve tried the search bar