Google Map Terrain View

Submitted by nurhodelta_17 on Friday, January 26, 2018 - 22:04.

Getting Started

In the previous tutorial, Adding Google Map to Site, we discuss on how to add a google map with its default type Roadmap and on how to obtain an api key for your map. This time where gonna make a terrain map type and since we are dealing with map, you need internet connection for it to work.

Full HTML

This is the full html of the app.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Google Map Terrain</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
        <h1 class="page-header text-center">Google Map Terrain</h1>
        <div class="col-sm-6 col-sm-offset-3">
                <div id="map" style="height:450px;"></div>
        </div>
</div>
<script>
function terrainMap() {
        var location = {lat:10.7528, lng:123.0876};
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        mapTypeId:google.maps.MapTypeId.TERRAIN,
        center: location
});
var marker = new google.maps.Marker({
        position: location,
        map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYiWmxjopdq2C04NLJXFeqBwDJikIsPdU&callback=terrainMap"></script>
</body>
</html>

Same as the previous tutorial, we set the latitude and longitude of our selected area in location variable then we added the line that defines our satellite map type.

mapTypeId:google.maps.MapTypeId.TERRAIN

Then we set our zoom value to 8. Zoom decreases or increases the zoom value of your map. That ends this tutorial. Happy Coding :)

Add new comment

197 views