3 Steps to Add Google Maps in your Website

Step 1: Get your API key

  • Go to the Google API Console.
  • Create a Project
  • On credentials page you will get your api key

Step 2: Create a HTML Page

<!DOCTYPE html>
<h1>This is my Map</h1>
<div id="map">Your map will come here</div>

Note : You can have any of your own customize code. Just make sure you give id="map" which should be same in your javascript code.

Step 3: Add Javascript

  • Load google maps JS in your code

<script async defer   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=firstMap"> </script>

  • JS code which defines map property on your page

function firstMap() {
    var mapOptions = {
        center: new google.maps.LatLng(17.38, 78.48),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

mapOptions provide you control over your map like you can define zoom 

  • Similarly you can have place your marker on google maps
        var marker = new google.maps.Marker({
          position:new google.maps.LatLng(17.38, 78.48) ,
          map: map
Please let us know if you are facing any difficulty while integrating in comments section 



This website uses cookies to ensure you get the best experience on our website.