Skip to main content

Google Map Satellite View

Screenshot
Body

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 satellite 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.
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Google Map Satellite</title>
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  5. </head>
  6. <div class="row">
  7. <h1 class="page-header text-center">Google Map Satellite</h1>
  8. <div class="col-sm-6 col-sm-offset-3">
  9. <div id="map" style="height:450px;"></div>
  10. </div>
  11. </div>
  12. function satelliteMap() {
  13. var location = {lat:10.7528, lng:123.0876};
  14. var map = new google.maps.Map(document.getElementById('map'), {
  15. zoom: 8,
  16. mapTypeId:google.maps.MapTypeId.SATELLITE,
  17. center: location
  18. });
  19. var marker = new google.maps.Marker({
  20. position: location,
  21. map: map
  22. });
  23. }
  24. <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCH4gLr0KyW1cmt0ZLn9evaTvNn3M0uf5M&callback=satelliteMap"></script>
  25. </body>
  26. </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.
  1. mapTypeId:google.maps.MapTypeId.SATELLITE
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