Google Map Hybrid

Submitted by nurhodelta_17 on Saturday, January 27, 2018 - 20:49.

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 hybrid 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 Hybrid</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 Hybrid</h1>
        <div class="col-sm-6 col-sm-offset-3">
                <div id="map" style="height:450px;"></div>
        </div>
</div>
<script>
function hybridMap() {
        var location = {lat:10.7528, lng:123.0876};
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        mapTypeId:google.maps.MapTypeId.HYBRID,
        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=AIzaSyD4V-9t-zhxcdqQl_el--3q9gbT1Rq0PGc&callback=hybridMap"></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 hybrid map type.

mapTypeId:google.maps.MapTypeId.HYBRID

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

199 views