How To Add Google Maps With A Marker to a Website - GeeksforGeeks

03 Dec, 2018
Google Maps is a web mapping service developed by Google. It offers satellite imagery, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation.
To add a Google Maps with a marker on a website there are three essential steps required:
Create an HTML pageAdd a map with a markerGet an API keyStep 1 : Creating an Html page.<!DOCTYPE html><html>  <head>    <style>      #map {        width: 100%;        height: 400px;        background-color: grey;      }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>  </body></html>Output :The given code describes the CSS that sets the size and color of the div. The style element sets the div size for your map.div is set to a height of 400 pixels, and width of 100% to display the map across the width of your web page.The code defines an area of the page for the Google map. The div appears as a grey block in the output, because the map has not been yet added.Step 2 : Adding map with a marker :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>    <script>      function initMap() {        var test= {lat: -25.363, lng: 131.044};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: test        });        var marker = new google.maps.Marker({          position: test,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">    </script>  </body></html>Explanation :In the code , the script loads the API from the specified URL.The callback parameter executes the initMap function after the API loads.The async attribute allows the browser to continue rendering the rest of the page while the API loads.The key parameter contains the API key.Type your api key inside “key = “.The code contains the initMap function that initializes and adds the map when the web page loads.Script tag can be used to add your own javascript.The code constructs a new Google maps object, and adds properties to the map including the center and zoom level.In the code below, new google.maps.Map() creates a new Google maps object.The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.The code below puts a marker on the map. The position property sets the position of the marker.Step 3: Getting an API keyFollowing are the steps required to get a API key:Go to the below mentioned linkhttps://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.Create a new project or select from your existing projects.Click Continue to enable the API.On the Credentials page, get an API key (and set the API key restrictions).Replace the value of the key parameter in the URL with your own API keyOutput :Example: Adding GeeksforGeeks office city on Google mapsINPUT :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <h3>GFG Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: 28.501859, lng: 77.410320};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">    </script>  </body></html>Output :This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.My Personal Notes
arrow_drop_upSave
Create an HTML page
Add a map with a marker
Get an API keyStep 1 : Creating an Html page.<!DOCTYPE html><html>  <head>    <style>      #map {        width: 100%;        height: 400px;        background-color: grey;      }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>  </body></html>Output :The given code describes the CSS that sets the size and color of the div. The style element sets the div size for your map.div is set to a height of 400 pixels, and width of 100% to display the map across the width of your web page.The code defines an area of the page for the Google map. The div appears as a grey block in the output, because the map has not been yet added.Step 2 : Adding map with a marker :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>    <script>      function initMap() {        var test= {lat: -25.363, lng: 131.044};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: test        });        var marker = new google.maps.Marker({          position: test,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">    </script>  </body></html>Explanation :In the code , the script loads the API from the specified URL.The callback parameter executes the initMap function after the API loads.The async attribute allows the browser to continue rendering the rest of the page while the API loads.The key parameter contains the API key.Type your api key inside “key = “.The code contains the initMap function that initializes and adds the map when the web page loads.Script tag can be used to add your own javascript.The code constructs a new Google maps object, and adds properties to the map including the center and zoom level.In the code below, new google.maps.Map() creates a new Google maps object.The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.The code below puts a marker on the map. The position property sets the position of the marker.Step 3: Getting an API keyFollowing are the steps required to get a API key:Go to the below mentioned linkhttps://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.Create a new project or select from your existing projects.Click Continue to enable the API.On the Credentials page, get an API key (and set the API key restrictions).Replace the value of the key parameter in the URL with your own API keyOutput :Example: Adding GeeksforGeeks office city on Google mapsINPUT :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <h3>GFG Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: 28.501859, lng: 77.410320};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">    </script>  </body></html>Output :This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.My Personal Notes
arrow_drop_upSave
Step 1 : Creating an Html page.
<!DOCTYPE html><html>  <head>    <style>      #map {        width: 100%;        height: 400px;        background-color: grey;      }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>  </body></html>
Output :The given code describes the CSS that sets the size and color of the div. The style element sets the div size for your map.div is set to a height of 400 pixels, and width of 100% to display the map across the width of your web page.
The code defines an area of the page for the Google map. The div appears as a grey block in the output, because the map has not been yet added.
Step 2 : Adding map with a marker :
<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <p>My Google Maps Demo</p>    <div id="map"></div>    <script>      function initMap() {        var test= {lat: -25.363, lng: 131.044};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: test        });        var marker = new google.maps.Marker({          position: test,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">    </script>  </body></html>
Explanation :
In the code , the script loads the API from the specified URL.
The callback parameter executes the initMap function after the API loads.
The async attribute allows the browser to continue rendering the rest of the page while the API loads.
The key parameter contains the API key.
Type your api key inside “key = “.The code contains the initMap function that initializes and adds the map when the web page loads.Script tag can be used to add your own javascript.
The code contains the initMap function that initializes and adds the map when the web page loads.Script tag can be used to add your own javascript.
The code constructs a new Google maps object, and adds properties to the map including the center and zoom level.
In the code below, new google.maps.Map() creates a new Google maps object.
The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.
The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.The code below puts a marker on the map. The position property sets the position of the marker.
The code below puts a marker on the map. The position property sets the position of the marker.
Step 3: Getting an API keyFollowing are the steps required to get a API key:
Go to the below mentioned linkhttps://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.Create a new project or select from your existing projects.Click Continue to enable the API.On the Credentials page, get an API key (and set the API key restrictions).Replace the value of the key parameter in the URL with your own API keyOutput :Example: Adding GeeksforGeeks office city on Google mapsINPUT :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <h3>GFG Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: 28.501859, lng: 77.410320};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">    </script>  </body></html>Output :This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.My Personal Notes
arrow_drop_upSave
Go to the below mentioned linkhttps://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.
Create a new project or select from your existing projects.
Click Continue to enable the API.
On the Credentials page, get an API key (and set the API key restrictions).
Replace the value of the key parameter in the URL with your own API keyOutput :Example: Adding GeeksforGeeks office city on Google mapsINPUT :<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <h3>GFG Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: 28.501859, lng: 77.410320};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">    </script>  </body></html>Output :This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.My Personal Notes
arrow_drop_upSave
Output :
Example: Adding GeeksforGeeks office city on Google maps
INPUT :
<!DOCTYPE html><html>  <head>    <style>      #map {        height: 400px;        width: 100%;       }    </style>  </head>  <body>    <h3>GFG Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: 28.501859, lng: 77.410320};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">    </script>  </body></html>
Output :
This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
HTML-Misc
GBlog
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe, ...
Socket Programming in C/C++
DSA Sheet by Love Babbar
GET and POST requests using Python
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?