Most of the website that we visit, tend to contain a Contact Us page, where we tend to see a map that contains the location of their office or the location of the place from where they operate that really proves helpful for an individual to reach them by seeing the location on the map.
 |
| Source: Google Images |
Now if you want to integrate Google Map in your website, you can use the HTML5 Google Maps API. This API allows you to show maps on your website. Another way of integrating the map into your website is to simply embed the code of iframe from the Google Map Website.
In this article of mine, I am going to show you guys both of these approaches.
Let us get started:
Using Google Map API:
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(21.7679, 78.8718);
/* here we are setting the latitude and longitude position of the location that we want to see on the map, I have set the position of India, you can get the Latitude and Longitude Position from this website http://www.mapsofindia.com/lat_long/ */
var mapCanvas = document.getElementById("map");
/* this variable is containing the location where we want to show the map, we have a div having the id map */
var mapOptions = {center: myCenter, zoom: 5};
// here we are setting the option for zooming into the map
var map = new google.maps.Map(mapCanvas, mapOptions);
//initializing the map with the above mapCanvas and mapOptions variable to display the map in our document
var marker = new google.maps.Marker({position:myCenter});
//adding a marker to the location, Marker - Single locations on a map. Markers can also display custom icon images
marker.setMap(map);
}
</script>
//this script source has to be added into your document to use Google Map API
<script src="https://maps.googleapis.com/maps/api/js?key=yourAPIkey&callback=myMap"></script>
//In order to get the API key, you need to visit https://console.developers.google.com
</body>
</html>
Screenshot:
 |
| This is the map which gets generated from the above code, make sure you add an API key first to use this code |
Embedding the Iframe:
- The first step is to visit the Google Map website in any of your favorite browsers. Visit Google Map here.
- The next step is to enter the location in the Search Google Maps text box, the location of which you want to get the iframe code.
- Now click on the menu option, there you will see the share or embed map option.
Click on the three tiles that are showing in this image to see all the available options
Once you click on the Menu, you will see all these options from there - Here you need to select the Share or embed Map option, from here you will get the iframe code that you can embed in your website.just copy this iframe src and paste it into your webpage where you want to display the location.
- It looks something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7438.414368368067!2d81.64493637314538!3d21.22363134357225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a28dd00587d4af7%3A0xcfb2ef23e9503ce2!2sTagore+Nagar%2C+Raipur%2C+Chhattisgarh+492001!5e0!3m2!1sen!2sin!4v1489994087906" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
That's all in this article of mine, I hope and believe now you guys have the understanding of how you can add Map in your website either by using the Google Map API or by simply embeding the iframe, Its up to you which method you want to use for adding Map in your website.
No comments:
Post a Comment
Thanks for Your Time!