Google maps example

by mattopen

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo - You need to provide your api key</h3>
    <div id="reportId" data-lat="3.119822" data-lng="101.594800">
    
    </div>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map

function initMap() {

    const latData = parseFloat(document.getElementById('reportId').getAttribute('data-lat'));
    const lngData =  parseFloat(document.getElementById('reportId').getAttribute('data-lng'));

var uluru = {lat: latData, lng: lngData};
    console.log(typeof latData);

    var options = {
        zoom: 15,
        center: uluru
    };

    var map = new google.maps.Map(
        document.getElementById("map"),
        options
    );

    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YourApiKey&callback=initMap">
    </script>
  </body>
</html>