How to Add Google Map to Your Website using Google Map API

How to Add Google Map to Your Website using Google Map API

Google map is a most important features now a day for every people and also those like traveling you can easily find the your destination location just one search with direction and time and distance.
Google is their map implantation on web pages and web application for locating business office, home and school university, hospital etc.map is implemented in web just in a single api key and simple javascript code.

<html >
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>

        #map {
            height: 100%;
        }

    </style>
</head>

<body>
<div id="map"></div>

<script>
        function MapDemo() {
            var Location = {lat: 22.0796, lng: 82.1391};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: Location
            });
             var image= 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
             var marker = new google.maps.Marker({
                position: Location,
                map: map,
                title:"Bilaspur India",
                draggable: true,
                animation: google.maps.Animation.DROP,
                icon:image
            });
        }

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=MapDemo">
</script>
</body>
</html>

Google map api provide map as road map view, satellite view and other and custom marker(location icon) like star,circle,pin,pentagonal and collage ,school, hospital icon and many more.
and also provide animation just like bouncing location marker moving your icon from one location to another.

3 Replies to “How to Add Google Map to Your Website using Google Map API”

  1. I enjoy you because of all of your labor on this site. Kim really loves conducting internet research and it is easy to understand why. My partner and i learn all regarding the compelling means you offer great tips and tricks via the web site and in addition encourage participation from people on this concern while our favorite girl is undoubtedly starting to learn a whole lot. Enjoy the remaining portion of the year. You have been conducting a brilliant job.

  2. Thank you so much for giving everyone remarkably brilliant opportunity to read from this blog. It’s always very good and jam-packed with amusement for me and my office colleagues to search the blog nearly 3 times per week to learn the fresh things you have. And of course, we’re certainly astounded considering the fantastic secrets you give. Selected 4 tips in this article are really the most impressive we have all ever had.

Leave a Reply

Your email address will not be published. Required fields are marked *