Adding Google Map on Your Website within 5 Minutes

There are many websites in which you have seen google map in a contact page to show company location. If any organization has website then it is mostly seen that you will find a google map on company or organization  website. Today we are going to tell you how you can add this functionalities on website with in 5 minutes. It helps to know about company or organization location or where it is located. By the help of google map you can easily find distance or location of organization. Follow these steps to add this functionalities as follows:
1.    Go to https://www.google.co.in/maps . You will find search box on right top type your desired location.

 

2.  After typing your location you will see on map all places near by your  typed location. Click on particular place to find latitude and longtitude which we will use later.

 

3. After getting latitude and longtitude, create file index.html with following code . Here you have to replace your laitude and longtitude as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Google Map on Your Website by Discussdesk</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
//Insert Latitude and Longitude here
var myCenter = new google.maps.LatLng(Your Latitude, Your Longtitude);
function initialize(){
    var mapProp = {
        center:myCenter,
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    var marker = new google.maps.Marker({
        position:myCenter,
    });

    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#map {width: 100%;height: 300px;}
</style>
</head>
<body>
    <div id="map"></div>
</body>
</html>


4. Run index.html file will have the following screen accroding to your  set  latitude and longtitude as shown below:

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments