GOOGLE MAP API

Display the Geo Locations of Mr. DIY

In this page, it includes the HTML source code and the display of
'How to Display the Geo Locations of Mr. DIY'.

Display:


ID: Longname: lat: lng:

Code:

At index.html

Step 1: Display the map without marker

HTML: lines 72

<div id="map" style="height:600px "></div>

Step 2: Create a table

HTML: lines 74 - 84

<table class="table table-stripped">
  <thead>
   <tr>
    <th>ID: </th>
    <th>Longname: </th>
    <th>lat: </th>
    <th>lng: </th>
   </tr>
  </thead>
  <tbody id="data"></tbody>
</table>

Step 3: Show the information of Mr.DIY in a table and marker on the map.

JavaScript: lines 86 - 162

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"> 
  //Code to load the map with center point of Monterey MA
  function initialize() {
   fetch("https://sheet.best/api/sheets/81d0cb74-755c-4aac-a2ba-70f90ba36fc4")
    .then(response => response.json())
    .then(data => {
     console.log(data);
     if (data.length > 0) {
      var temp = "";
      data.forEach((u) => {
       temp += "<tr>"
       temp += "<td>" + u.id + "</td>"
       temp += "<td>" + u.longname + "</td>"
       temp += "<td>" + u.lat + "</td>"
       temp += "<td>" + u.lng + "</td>"
      })
      document.getElementById("data").innerHTML = temp;
     }
     var center = new google.maps.LatLng(40.001517, 115.652531);

     var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 3,
      center: center,
      gestureHandling: 'greedy',
      mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";

     var markers = [];
     for (var i = 0; i < data.length; i++) {
      var u = data[i];
      var infoContent = '<strong>' + u.longname + '</strong>';
      infoContent += '<p>' + '<a href="' + u.baidu + '" target="_blank">' + u.baidu + '</a>' + '</p>';
      var latLng = new google.maps.LatLng(
       u.lat,
       u.lng
      );
      var marker = new google.maps.Marker({
       position: latLng,
      });
      markers.push(addMarker(marker));
     }

     function addMarker(u) {
      var marker = new google.maps.Marker({
       position: latLng,
       map: map,
       icon: 'diy.png',
      });

      /*if(props.iconImage){
       marker.setIcon(props.iconImage);
      } */

      //Check content
      if (infoContent) {
       var infoWindow = new google.maps.InfoWindow({
        content: infoContent
      });
      marker.addListener('click', function () {
        infoWindow.open(map, marker);
      });
     }
     return marker;
    }
    var markerCluster = new MarkerClusterer(map, markers, { imagePath: imagePath });
   })
  }
</script>

<script type="text/javascript">
  $(document).ready(function () {
   initialize(); // init map
  });
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIz aSyBTzxjPohB40FZEksFJ6m-FMPILqn78fHs&callback=initMap"></script>