google map in javascript , how much does google maps cost , google maps javascript api cost ,can i use google maps on my website , google maps js , google maps using javascript , how to integrate google maps in html .

If you are a web developer then sometimes you might need to give people a direction to your office or any of your working places on your website . To fulfill this need of web developers , Google introduced it’s map API .

Google Maps provides it’s API to let organizations show their exact location on map ( giving a better sense of direction ) to their website visitors .

How much does google maps cost ?

Google Maps API is free to use , it provides 28,500 maploads per month for no charge , you can check it’s pricing here .

Can i use google maps on my website ?

Yes , any website can use Google Maps API , you can use it on localhost or any of your live website .

In this tutorial we will show you how easily you can use google maps API on your website with javascript gMaps.js library . It is a very simple to use library that allows you to add google map on your website without writing large amount of code .

Project Overview

To demonstrate the usage of google maps API we have created a simple layout using html and bootstrap 4 , you can check below image .

google map in javascript
Google Maps API

HTML Layout

We have used bootstrap container and row class to align contents . In row we have used two columns , in the left column we have shown google maps of New York City and in the right column we have written the dummy description and shown some dummy images .

We have used unsplash api to show dummy images on the right column .

<div class="container">
        <div class="row mt-5">
            <div class="col-md-6 left" >
                <div id = "gmap"></div>
            </div>
            <div class="col-md-6 right d-flex flex-column justify-content-between">
                <div class="head_section"><h3>New York City</h3></div>
                <div class="desc_section"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nostrum corporis dolor quis consequuntur error reiciendis, eius iure tempora. Voluptatibus soluta, optio dolorem sequi ut nostrum itaque nihil iusto vel libero eos. A adipisci modi voluptates veritatis, cupiditate non quibusdam!</p></div>
                <div class="photos_section">
                    <div class="photos_head"><h4>Photos</h4></div>
                    <div class="photos d-flex flex-row justify-content-between align-items-center">
                        <div class="photo1">
                            <img src="https://source.unsplash.com/1600x900/?city" alt="" width = "150" height = "90">
                        </div>
                        <div class="photo2">
                            <img src="https://source.unsplash.com/1600x900/?city" alt="" width = "150" height = "90">
                        </div>
                        <div class="photo3">
                            <img src="https://source.unsplash.com/1600x900/?city" alt="" width = "150" height = "90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Including javascript links

Now , To use Google Map API you need to include the cdn link of gMaps.js library , and google Maps official API link .

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>

You need to have a Google Map API key in order to make request on Google Maps API link . You don’t have one you can create by following the below instructions .

Creating Google Maps API Key

  • Create new project and Create Credentials (API key)
  • Click on “Library”
  • Click on any API that you want
  • Click on “Enable”
  • Click on “Credentials” > “Edit Key”
  • Under “Application restrictions”, select “HTTP referrers (web sites)”
  • Under “Website restrictions”, Click on “ADD AN ITEM”
  • Type your website address ( xyz.com/* , *.xyz.com/* , xyz.com/specific_path/* ) in the text field and press “Enter” to add it to the list
  • SAVE and Use your key in your project

Now after generating the API key , replace the “YOUR_API_KEY” in above code with your generated key .

Showing Map

Now in order to show map on website we need to create a gMaps object with parameter ‘#map’ as selector of tag in which we want to show map , latitude and longitude of location .

Now to show a marker on the map we’ve used addMarker() method to set the latitude , longitude and title of location at which we want to show our marker . And for zooming we’ve used setZoom() method .

var maps = new GMaps({
        el: '#gmap',
        lat:  40.730610,
        lng: -73.935242
    });

maps.addMarker({
    lat: 40.700610,
    lng: -73.997242,
    title: 'New York'
});

maps.setZoom(8);

Css Styles

We’ve used some css styles to make our page look more attractive and stabilized . We’ve used justify alignment on text and give all the images a border radius of 10px .

.left img{
    border-radius: 10px;
}
.desc_section p{
    text-align: justify;
}

.container .row{
    height : 330px;
}
.photos img{
    border-radius: 10px;
}
.photos{
    margin-top:30px;
}
.left #gmap{
    width:540px;
    height:330px;
    border-radius: 10px;
}

So that’s how you can integrate and use google maps on your website very easily . Thanks for reading

You can follow me on Linkedin : Anand Raj

Follow our Company’s Page on Linkedin : Be Practical

Join Our Telegram community of developers over here

Checkout our Udemy course on Firebase Chat application Development with Javascript and Jquery here

Next Article : Make your own javascript library from scratch