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.');
}
Related
This question already has answers here:
How to remove a MapType from google map using Google Maps Javascript V3 API?
(4 answers)
Closed 2 years ago.
I am using Google map API for my delivery website. I am using official Google Api Map code on my website to get the exact location of customer using GPS.
This is the code of Google Map
<!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>
</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;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// 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('Location found.');
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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
This is the output
Screenshot
I want to hide the MAP and Satellite Labels from the Google map. How to do this?
To remove the mapTypeControl, disable the defaultUI (which includes that), add back in the zoomControl, streetViewControl and fullscreenControl (if you want them), as described in the documentation:
// disable the default User Interface
disableDefaultUI: true,
// add back fullscreen, streetview, zoom
zoomControl: true,
streetViewControl: true,
fullscreenControl: true
proof of concept fiddle
code snippet
// 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;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 6,
// disable the default User Interface
disableDefaultUI: true,
// add back fullscreen, streetview, zoom
zoomControl: true,
streetViewControl: true,
fullscreenControl: true
});
infoWindow = new google.maps.InfoWindow;
// 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('Location found.');
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);
}
/* 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;
}
<title>Removing the MapType Control</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<div id="map"></div>
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
I'm working on a form where I want the user to enter their current location using the GPS location in google maps. I've read the Google Maps API documentation but I'm still a bit lost on how to integrate it all. I would appreciate any help, JS is still pretty new to me and it hasn't been easy to learn.
This is the code I used from Google Maps API.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 18.2208, lng: -66.5901},
zoom: 7,
});
infoWindow = new google.maps.InfoWindow;
// 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('Localización encontrada.');
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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwnKnBH4qxyjHYkg3QlJP46-yG_o4QkSc&callback=initMap">
</script>
Its kind of hard to answer your question since we are missing some information. Is the Google maps imported in your project with the geolocation API? You can create an account and generate a key on https://console.cloud.google.com
After that, you'll need to call the initMap() after the page is done loading by adding the following code at the end of your Javascript.
(function(){
initMap();
}());
From there, you can now get the value of the coordinates inside your initMap function and add them wherever you need them calling pos.lat and pos.lng.
infoWindow.setContent(pos.lat+' / '+pos.lng);
https://jsfiddle.net/SohRonery/q69ra78v/6/
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
Here are two jsfiddles with identical code. One is a fork from Google Maps API's documentation, no changes. The second is just copied and pasted into jsfiddle. The fork from Google renders as expected. The one I copied and pasted does not.
I used a diff checker, and it showed them as identical. What am I missing?
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDglJmtJY5078jjZOJZFNNMO7CJb5E3nE4&callback=initMap">
</script>
JS
// 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.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
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('Location found.');
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.');
}
CSS
/* 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;
}
In your second fiddle, the JAVASCRIPT settings needs to have Load Type as No wrap - in <body>