Few days back during I worked for a Corporate website designing I found to integrate Google Map in their contact us page. Their office location is in Chicago, US. According to latitude & longitude this location (Latitude & Longitude) is coming under 40.446947, -90.878906. According to the Customer here they required to add Google Map to Website using simple JavaScript. I did so & sharing the same example here.
Understanding Google Maps Embed API
The Google Maps Embed API provides a simple way to integrate Google Maps into your website. This API allows you to display a map with customizable settings such as size, zoom level, and markers. Using the Embed API is suitable for most websites, as it requires minimal coding knowledge.
Technically it is very simple to embed Google Map API in HTML5. To do so here I have a container div “mapView” in HTML body. To refer Google Map API here I integrated the script file from http://maps.googleapis.com/maps/api/js. Using a simple JavaScript function initGoogleMap() I am configuring the Google Map properties. Basically in the below example I used 3 properties to configure the Google Map. Center, Zoom & mapTypeId.
Center is accepting latitude & longitude to show that point in the center of the map view. Using zoom I am passing 6 to show the map more closer to the user. mapTypeId is useful to display the map in various views. Basically there are 4 types of views provided by Google Map. These are ROADMAP (the default 2D view), SATELLITE (photographic view), HYBRID (photographic view + roadmap), TERRAIN (map with mountains, rivers, temples etc.).
Finally to initialize the Google Map API I am assigning the new instance of the Google Map API to a variable “newMap”. On window load to display the map in Contact us page I am adding the function initGoogleMap() to an event of Google Map using DOM listener method.
embedGoogleMap.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>How to add Google Map to Website?</title>
<!--Google Map API-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
/*Funtion to assign properties for map view*/
function initGoogleMap() {
var mapProperties = {
center: new google.maps.LatLng(40.446947, -90.878906),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/*Creating a new instance for Google Map*/
var newMap = new google.maps.Map(document.getElementById("mapView"), mapProperties);
}
/*On window load showing Google Map*/
google.maps.event.addDomListener(window, 'load', initGoogleMap);
</script>
</head>
<body>
<div id="mapView" style="width:600px; height:420px;"></div>
</body>
</html>
For WordPress Websites
1. Log Into Your WordPress Dashboard: Access the backend of your WordPress site.
2. Create or Edit a Post/Page: Navigate to the post or page where you want to add the map.
3. Switch to HTML View: In the block editor, add a Custom HTML block or switch to the HTML editor in the classic editor.
4. Paste the Embed Code: Insert the copied iframe code into the HTML block.
5. Update or Publish: Save or publish your changes to make the map visible to your visitors.
Troubleshooting Common Issues
## Map Not Displaying
Check Your API Key: Ensure that your Google Maps API key is valid and that you have enabled the Maps JavaScript API in your Google Cloud Console.
Inspect Console Errors: Open your browser’s developer console (F12) to check for any error messages related to the map.
## Poor Loading Performance
Optimize Map Size: Make sure the map’s iframe or div container is sized appropriately. Large maps can slow down page loading times.
Limit Map Features: If you’re using the JavaScript API, limit unnecessary features and controls to enhance performance.
Conclusion
Adding Google Maps to your website can significantly improve user experience by providing clear navigation and location information. By following the steps outlined above, you can easily integrate Google Maps using the Embed API or the JavaScript API for more advanced features. Make sure to test and optimize your map for the best performance, ensuring a seamless experience for your visitors.