Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Tutorial Google Maps API: Display Google Map Map on the Web

Learn Google Maps API
Google Maps is a Google product that allows us to see maps from all over the world.
Even not only maps, Google Maps also provides images from several building locations, roads, and others.
Google Maps on Android

What is the Google Maps API?

Google Provides a Google Maps API that allows us to build applications using Google Maps.
Google Maps API (Application Programming Interface) is an API provided by Google to use Google maps (Google Map) in the application that we build. The Google Maps API allows us to modify the map and information contained in it.
Google Maps API is available for platforms:
Google Maps Platform
  • The Web is a Google Maps API used on the Web.
  • Android is a Google Maps API used on Android applications.
  • iOS is a Google Maps API that is used on iOS applications.
  • Web Service is the use of Google Maps through the Web Service.
On this occasion we will use the Google Maps API for the Web.

Display Google Maps on the Web

There are a number of steps we must take to display a map of Google Maps on the Web:
  1. Insert a Google Map library in tags <head>or inside <body>.
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    
  2. Create a function initialize()for preparing maps:
    function initialize() {}
    
  3. Make properties needed by the map
    var propertiPeta = {
        center:new google.maps.LatLng(-8.5830695,116.3202515),
        zoom:9,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    
    This property is written in the function initialize().
  4. Creating a Map Object
    var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
    
  5. Adding functions initialize()to the event window load to be called when the web is opened
    google.maps.event.addDomListener(window, 'load', initialize);
    
  6. Make tags <div>as containers to display maps.
    <div id="googleMap" style="width:100%;height:380px;"></div>
    
So the complete code will be like this:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tutorial Google Map - Petani Kode</title>
  
    <!-- Menyisipkan library Google Maps -->
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    <script>
        // fungsi initialize untuk mempersiapkan peta
        function initialize() {
        var propertiPeta = {
            center:new google.maps.LatLng(-8.5830695,116.3202515),
            zoom:9,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        
        var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
        }

        // event jendela di-load  
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  
</head>
<body>

    <!-- Elemen yang akan menjadi kontainer peta -->
    <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Easy isn't it?
Let's discuss more ...
First starts from inserting Google Maps library :
<script src="http://maps.googleapis.com/maps/api/js"></script>
This library can be inserted in tags <head>as well <body>The important thing is that this library is inserted first before the script initialize().
Penysipan library Google Maps sometimes also requires API Key for production environments.
How to make Google Maps API Key can be read at: How to Make Google Maps Key API
Berkutnya we make a function initialize()that aims to prepare a map.
Inside the function initialize()there is a property definition that the map requires.
var propertiPeta = {
    center: new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};
There are three properties that we provide:
  1. centeris a property to set the middle position of the Google Map when it is first displayed. In the example above I give the coordinate value for Lombok Island as the coordinates of the middle value.
  2. zoom adalah tingkat skala Google Maps. Sebagai acuan, berikut ini tingkat sekala yang biasanya digunakan:
    • 0: Bumi (smua peta ditampilkan)
    • 1: Peta Dunia
    • 5: Landmass/continent
    • 10: Kota
    • 15: Jalan
    • 20: Bangunan
  3. mapTypeId adalah tipe Google Map yang akan digunakan. Pada Contoh di atas, kita menggunakan ROADMAP. Selain ROADMAP ada juga satelliteterrain, dan hybrid.
Setelah itu kita membuat objek peta berdasarkan properti tersebut:
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
Perhatikan di asana kita menyatakan untuk menggunakan elemen dengan ID googleMap. Berarti nanti kita harus membuat elemen HTML dengan ID googleMap.
Lalu berikutnya kita mendaftarkan fungsi initialize() ke dalam event window load agar dieksekusi saat halaman web dibuka.
google.maps.event.addDomListener(window, 'load', initialize);
Terakhir membuat elemen HTML dengan ID googleMap:
<div id="googleMap" style="width:100%;height:380px;"></div>
Perlu diperhatikan:
This element must have height and width. In the example above we give the height 380pxand width 100%of the screen.

0 Komentar untuk "Tutorial Google Maps API: Display Google Map Map on the Web"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top