I am trying to develop a web application which allows the user to post notes (markers) on the map for others to read. It is basically placing markers on the map that consist of the subject and the message. It is accessed by clicking on a marker on the map.
Right now I am facing an issue with regards of retrieving the data from Firebase. I managed to make the application send data to Firebase (latitude and longitude for marker location on the map, and the message with the subject itself), but I am unable to take the information back in order to place a marker on the exact coordinates.
I followed many YouTube tutorials and online guides but the Firebase data won't show anywhere except for the console in Chrome.
Any clue what could be the issue? I am posting the JavaScript for he map and Firebase below so you can see how I saved message, subject, latitude and longitude to Firebase database.
Thanks
firebase.initializeApp(config);
var note = firebase.database().ref("note");
/*map*/
window.onload = getLocation;
var geo = navigator.geolocation;
function getLocation() {
if (geo) {
geo.watchPosition(displayLocation);
}
else {
alert("opps, geolocation API is not supported ");
}
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
/*diaplays coordinates in the footer of the webapp*/
var div = document.getElementById( 'location' );
longText = document.getElementById("longitude")
if (latitude == latitude)
{
div.innerHTML = "X: " + latitude + " Y: " + longitude;
}
}
/*map*/
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6,
disableDefaultUI: true,
});
infoWindow = new google.maps.InfoWindow;
/*gets Navigation, sets the map to current position and posts a marker*/
/*Shouldn't post a marker, code will be removed later when we learn how
to post markers to note locations rather than user locations*/
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
})
var marker = new google.maps.Marker
({
position: pos,
map: map
})
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
}
/*stores Geolocation in local storage to call it later*/
navigator.geolocation.getCurrentPosition(function(p)
{
localStorage.setItem("latitude", p.coords.latitude);
localStorage.setItem("longitude", p.coords.longitude);
}, function(e){console.log(e)})
/*error handler obviously*/
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
/*button firebase function*/
var submitNote = function () {
var subject = $("#messageSubject").val();
var message = $("#messageContent").val();
var lat = localStorage.latitude;
var lon = localStorage.longitude;
note.push({
"subject": subject,
"message": message,
"latitude": lat,
"longitude": lon
});
};
$(window).load(function () {
$("#noteForm").submit(submitNote);
});
To retrieve the latitude and longitude from the database:
firebase.database().ref().child("markers").on('value').then(function(snapshot) {
snapshot.forEach(function(child) {
var childData = child.val();
var latitudes=child.val().latitude;
var longitudes=child.val().longitude;
});
});
Assuming the database is like this:
markers
pushid
subject: subject
message: message
latitude: lat
longitude: lon
Related
I'm working on a project that locates coffee shops near the user's location (which is retrieved via the browser). I'm using Google Maps API with the geolocation.
My idea is to locate the users location via geolocation and then retrieve cafes nearby their location.
I can't seem to figure out how to add coffee shops or auto search and display coffee shops on the map nearby the user once the location is retrieved by the browser.
Hardcoding the locations in just doesn't seem like the solution but I was hoping to get some advice from more experienced programmers on how I could do this.
At the moment, the code for the map is taken from Google Maps documentation as it provides the functionality I need other than the searching.
I've pasted it below.
function mapFunc() {
// referenced from google maps api documentation
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 15
});
infoWindow = new google.maps.InfoWindow;
//HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('You are here!');
infoWindow.open(map);
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
search();
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
//get coffee shops nearby??
}
mapFunc();
You need to use the places library in of Google Map api.
Include it in in tag as below
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Then use something like the sample code below:
var map;
var service;
var infowindow;
function initialize() {
//replace the lat long with results from your geocoding function
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500', //radius in metres
type: ['coffee shops']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
see details in https://developers.google.com/maps/documentation/javascript/places#place_search_requests
So I'm trying to set up a website for a school project and part of it requires obtaining user location and displaying it on a map. I've managed to get the user location using the geolocator api but can't seem to update the marker as even after getting new lat long it remains in the default location. Any help would be greatly appreciated :)
I've taken a default location (California) to display on loading the website (which it does successfully) and managed to get user location (verified using console to display results) but the code still displays the California marker.
<script type="text/javascript">
var latitude = 36.8;
var longitude = -119.4;
var currloc;
function getLoc() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude = (Math.round(position.coords.latitude*100))/100;
longitude = (Math.round(position.coords.longitude*100))/100;
currloc = {lat: latitude, lng: longitude};
console.log("Geolocation supported");
console.log(latitude);
console.log(longitude);
});
}
else {
latitude = 0.0;
longitude = 0.0;
console.log("Geolocation not supported");
}
}
function mapInit() {
currloc = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById("map"), {zoom: 4, center: currloc, disableDoubleClickZoom: true,});
var mark = new google.maps.Marker({
position: currloc,
map: map,
title: latitude+', '+longitude
});
}
</script>
I would expect the marker to change as the initMap function's currloc values have changed however on the map it doesn't show the new location.
getLoc() is asynchronous. Currloc changes after the callback is called. I am assuming you called mapInit synchronously.
Call the marker inside the callback
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Place this inside the HTML head; don't use async defer for now -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script>
var config = {
apiKey: "",
authDomain: "carrier-35d7c.firebaseapp.com",
databaseURL: "https://carrier-35d7c.firebaseio.com",
projectId: "carrier-35d7c",
storageBucket: "carrier-35d7c.appspot.com",
messagingSenderId: "827792028763"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(locationsRef.push());
</script>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
var lat, lng;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
//mapTypeId: google.maps.MapTypeId.ROADMAP
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
var pos = {lat: lat, lng: lng };
_setGeoFire();
var locationsRef = firebase.database().ref("locations");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
var markerLabel = document.cookie;
var marker = new google.maps.Marker({
position: {
lat: data.User.l[0],
lng: data.User.l[1]
},
map: map,
label: markerLabel
});
bounds.extend(marker.getPosition());
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6) + "<br>" + data.User.g);
infowindow.open(map, this);
}
}(data)));
map.fitBounds(bounds);
});
infoWindow.setPosition(pos);
infoWindow.setContent('Current Location');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>
I'm using google maps API to display the user current location on a map. Everytime the user refreshes the page, it creates a new marker with the user's current location but it leaves the old one there also. I want the old marker to be deleted everytime the user refreshes the page so that there is only one marker per user instead of like 50. Ive tried using this code.
if (marker&& marker.setPosition) {
// marker exists, move it
marker.setPosition(lat,lng);
} else {
// create the marker
marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
I can't seem to get this to work. If anyone could help me with this I would really appreciate it.
It really depends on what you are trying to achieve. You can delete that location when user will close or refresh browser.
For example:
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
var pushRef = locationsRef.push()
// Create a new GeoFire key under users Firebase location
// replace var geoFire = new GeoFire(locationsRef.push()); with
var geoFire = new GeoFire(pushRef);
later in your code:
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
pushRef.child("User").onDisconnect().remove();
}).catch(function(error) {
console.log(error);
});
}
I am fairly new to Google Maps API and not very experienced in JS. I've got some questions on geolocations. What I am trying to achieve: a user's current geolocation should be saved onclick, displayed on map and stored on clientside, so that it can be navigated to in later steps. The code below in its current state shows the geolocation of a user in an (InfoWindow) as the map is rendered for the first time.
Any hints on how to achieve what I am planning to do?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Geolocation in HTML
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('You are here!');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
I am trying to show on one map user's current location and other users markers whose locations I get from ajax post.
In other words I am trying to combine this
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
with this
http://en.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html
or even the simpler version
Google Maps JS API v3 - Simple Multiple Marker Example
but I don't know how to implement my data that I get from ajax. In order to get the information from ajax I have to pass the latitude and longitude so that I can get the users that are in 1km radius and who were logged in in the past 5 minutes. I have written the query, and my api is correct,I have checked that part, but I don't know how to combine the two codes in order to get one map with user's current location and other users markers.
this is my index.html file
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geolocation</title>
<script src="location.js"></script>
</head><body>
<div id="map"></div>
<p id="geolocation"></p>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.38361, lng: 20.38194},
zoomControl:true,
zoom: 15
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('You are here.');
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
and this is my location.js file
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
var element = document.getElementById('geolocation');
console.log(position.coords.latitude);
console.log(position.coords.longitude);
//here is where I write in the db user's current location
$.post("url/location", {username: localStorage.getItem("username"), latitude: position.coords.latitude, longitude: position.coords.longitude});
//here is where I get other users locations based on user's current one and in the radius of 1km
$.post("url/getUsers", {latitude: position.coords.latitude, longitude: position.coords.longitude})
.done(function (data) {
$(data).each(function (index, value) {
//here I am writing in the console the data that I receive back from the ajax call, and I presume that I should make my markers here
console.log(value.username + ' ' + value.latitude + ' ' + value.longitude);
});
});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
for (i = 0; i < jsonArray.locations.length; i++)
{
var counter = jsonArray.locations[i];
var infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position: new google.maps.LatLng(counter['lat'], counter['lon']),
map: map,
icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+i+'|FF0000|000000'
});
}