Using Geolocation in HTML Google Maps Map

Question

I'm new to HTML, and I'm trying to learn about geolocation. I have a map using HTML's Google Map plugin (W3Schools Tutorial on Google Maps), that shows across the entire screen, and currently adds a marker at a location I set (lat: 0, lng: 0). I read briefly about geolocation, and was wondering if there is any way I could use geolocation so that the marker is located at the location of the user accessing the site. I know I could use the "position.coords.latitude" and "position.coords.longitude", but when I replace the 0s in "var position = [0, 0];" to those lines, the map doesn't render at all. I know I probably have to add something before using "position.coords.latitude" and "position.coords.longitude", but I don't know what, so I put all of my code below (but replaced all personal information, apart from my name, with a #). I don't know any PHP / SQL, just in case I need a server to access the user's location.

<!doctype html>
<html>
<head>
<title>Beck Rivera - Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var position = [0, 0];
function showGoogleMaps() {
    var latLng = new google.maps.LatLng(position[0], position[1]);
    var mapOptions = {
        zoom: 16,
        streetViewControl: false,
		panControl: false,
		zoomControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng,
	};
    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
	marker.setMap(map);
	var infowindow = new google.maps.InfoWindow({
		content:"<b>Wishnick Hall</b><br />Illinois Institute of Technology<br />Chicago, IL 60616"
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
}
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>
</head>
<body class="main">
<div id="googlemaps"></div>
<div class="navbar-wrapper">
<div class="contain">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" style="padding:7px;text-align:left;margin-left:-20px;margin-right:7px" href="Home.html"><img style="float:left;padding-left:15px" src="C:\Program Files (x86)\Notepad++\Beck Rivera\Images\Logo(s)\BR.png" alt="Logo" width="44" height="35"></a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#</a></li>
<li><a href="#">#<span class="badge">New</span></a></li>
<li class="active"><a href="#">#<span class="badge">New</span></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<h1>Where Am I Right Now?</h1>
</body>
</html>

code code · Accepted Answer · 2015-07-17T20:49:01

Try using navigator,geolocation and get the current position. It's a function that will return your position

navigator.geolocation.getCurrentPosition(function (pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
    });

Using Geolocation in HTML Google Maps Map

1 Answers