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 page
- Add a map with a marker
- Get an API key
Step 1 : Creating an Html page.
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 :
- 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 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 key
Following are the steps required to get a API key:
- Go to the below mentioned link
- 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 key
- CSS | Website Layout
- How cookies are used in a website?
- Why do you need a Responsive Website
- Ways to track a Website
- Making a QR code for a website
- How to host a website on IBM Cloud
- Website Blocker Using Python
- 10 Reasons Why SEO is Important for a Website
- Static vs Dynamic Website
- What is the Difference between Website and Web Portal
- HTML Course | Building Header of the Website
- Create a Website Alarm Using Python
- How to make a website using WordPress (Part - 1)
- 8 Ways to Shipwreck Your Next Website Design
- Top 10 Free Resources For App And Website Themes
Example: Adding GeeksforGeeks office city on Google maps
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 email@example.com. 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.