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
- How to add Google map and Marker to your Application using AngularJS ?
- Google Maps | Introduction
- Google Maps | Types
- Google Maps | Localization
- Google Maps | Zoom
- Google Maps Markers
- Google Maps Info Windows
- CSS ::marker Property
- SVG marker element
- HTML marker-start Attribute
- HTML marker-mid Attribute
- HTML marker-end Attribute
- How to add whatsapp share button on a website ?
- How to host a simple website using Google Sites ?
- How to make a website using WordPress (Part - 1)
- How to make a website using WordPress (Part – 2)
- Using GitHub to host a free static website
- Making your WordPress Website More Secure
- Why do you need a Responsive Website
- Create a Website Alarm Using Python
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 firstname.lastname@example.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.