Geolocation with JavaScript and Google Maps

Google Maps is an excellent tool for viewing scrollable maps and even routes between different points; this excellent tool is available to use in our web projects. In this entry we will see how to use Google Maps in our web projects:

Obtaining the user's location, a topic already explained in the last article Geolocation with JavaScript:

myLatlng = {
	Lat: position.coords.latitude,
	Lng: position.coords.longitude
}

We include a link to the Google Maps API in our HTML document to be able to use it:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Then we include the canvas where the map will be drawn:

<div id="map_canvas" style="width:500px; height:500px"></div>

Note that the map can be of different sizes; For the purposes of this example it will be 500px X 500px.

The penultimate step is to build the object used to manipulate the map options:

var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Types of maps that are available in the Google Maps API:

MapTypeId.ROADMAP displays the default road map view.
MapTypeId.SATELLITE displays satellite images from Google Earth.
MapTypeId.HYBRID displays a mix of normal and satellite views.
MapTypeId.TERRAIN displays a physical map based on relief information.

Possible zoom levels range from 0 to 21 for the farthest.

The last step is to build the map:

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Building our basic map

1+2+3+4+5

Now let's look at all the steps together:

Conclusion

Here we can see an extension of our last article: Geolocation with JavaScript using the same bases explained; but this time using the Google Maps API to show the user's location.

Geolocalización

JavaScript

Google Maps

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy