google map sample

fiddle.css

/* 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;
}

fiddle.html

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

fiddle.js

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
// The maximum width of the info window is set to 200 pixels.

function initMap() {
  var elc = {
    lat: 22.742148,
    lng: 113.852663
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: elc
  });

  var contentString = '<div id="content">' +
    '<h1 id="firstHeading" class="firstHeading">Elclcd</h1>' +
    '<div id="bodyContent">' +
    '<p>Founded in 2007,Electron is a leader manufacture in providing trusted advertising,self-service,DPF product width high-quality,high-perfermance.</p>' +
    '<p>Offers <b>Hardware,Firmware,Software ID/ME</b> design service.</p>' +
    '<p>Website: <a href="http://www.elclcd.com">' +
    'http://www.elclcd.com</a> </p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 240
  });

  var marker = new google.maps.Marker({
    position: elc,
    map: map,
    title: 'Elclcd'
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}