Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Google Maps API Tutorial: How to Use the Window Info to Display Information

Info Window is an object that is used to display information at a certain coordinate point. Usually used together with markers .
Example Window Info:
Example Window Info
We can fill in the Window Info with HTML code. So that the data displayed in the Info Window window can we give the CSS style to make it look attractive.

How to Make Window Info

The first thing we have to make is the content or information that we will display in the info window .
var contentString = '<h3>Hello Dunia!</h3>';
The info window content is a string of HTML.
Then create an object infowindowby giving property content from contentStringwhat was created.
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
In addition to properties contentinfo window also has properties:
  • pixelOffsetcontains the distance from the info window to the coordinates of the info window position.
  • positioncontains the LatLng or coordinates to put the info window on the map.
  • maxWidthsets the maximum info window width in pixels.
While the info window method exists:
  • open()to display the info window ;
  • close()to close the info window ;
  • setPosition()to change the position of the info window .

Code Example Info Window

After knowing how to create an info window , now let's try to make the complete code.
Try following the following code:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Belajar Info windows</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    
    <!-- elemen untuk menampilkan peta -->
    <div id="map"></div>
    
    
    <script>

      function initMap() {
        
        // membuat objek untuk titik koordinat
        var lombok = {lat: -8.5830695, lng: 116.3202515};
        
        // membuat objek peta
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: lombok
        });

        // mebuat konten untuk info window
        var contentString = '<h2>Hello Dunia!</h2>';

        // membuat objek info window
        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          position: lombok
        });
        
        // tampilkan info window pada peta
        infowindow.open(map);

        
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>
The result:
The info window results

Make a Window Info with Marker

Usually the info window is used with markers . The Info Window will be displayed when the marker is clicked.
To do this, we must call the function infowindow.open()in the event markerclicked, like this:
marker.addListener('click', function() {
    infowindow.open(map, marker);
});
The complete code will be like this:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Belajar Info windows</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    
    <!-- elemen untuk menampilkan peta -->
    <div id="map"></div>
    
    
    <script>

      function initMap() {
        
        // membuat objek untuk titik koordinat
        var lombok = {lat: -8.5830695, lng: 116.3202515};
        
        // membuat objek peta
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: lombok
        });

        // mebuat konten untuk info window
        var contentString = '<h2>Hello Dunia!</h2>';

        // membuat objek info window
        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          position: lombok
        });
        
        // membuat marker
        var marker = new google.maps.Marker({
          position: lombok,
          map: map,
          title: 'Pulau Lombok'
        });
        
        // event saat marker diklik
        marker.addListener('click', function() {
          // tampilkan info window di atas marker
          infowindow.open(map, marker);
        });
        
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>
The result:
Window info above marker

0 Komentar untuk "Google Maps API Tutorial: How to Use the Window Info to Display Information"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top