Embed Google Maps using iframe – No need to add Billing

We also can embedded Google Maps using iFrame. We don’t need to enabled the billing for this. To embed Google Maps using place name is quite easy as we can use iFrame tag and specify the place. Example of the code is below:

<iframe src="https://www.google.com/maps?q=gombak&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

You can change gombak to your place name. This will output the maps below:

If you want to embedded based on latitude and longitude you also can change the place name according to your latitude and longitude and use navigator to get the geolocation. Example:

<div id="maps"></div>

<script type="text/javascript">
  var latitude = 3.2544572;
  var longitude = 101.7345989;
  document.getElementById("maps").innerHTML = '<iframe src="https://www.google.com/maps?q='+latitude+','+longitude+'&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>';
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  alert("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  latitude = position.coords.latitude;
  longitude = position.coords.longitude;
  document.getElementById("maps").innerHTML = '<iframe src="https://www.google.com/maps?q='+latitude+','+longitude+'&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>';
}
</script>

This will output it as below result. 

https://portfolio.adisazizan.xyz/wp-content/uploads/2019/04/maps_iframe.html

Hope this will help. Please let me know in comment if you have anything to add on. Cheers.