Up next in 10
Google Maps Static API Example to Display Maps Based on Location in Image Tag Using Javascript
Dec 10, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/google-maps-static-api-example-to-display-maps-based-on-location-in-image-tag-using-javascript/
Show More Show Less View Video Transcript
0:01
Uh hello friends, today in this tutorial
0:02
I'll be showing you that how to display
0:04
static map inside your website using the
0:07
Google map static API. So basically here
0:10
we are just displaying the Google map
0:13
using a image tag. We are not using any
0:16
kind of external JavaScript to call the
0:18
API. So we are just providing the API
0:21
key. So there is a Google map static API
0:24
available to the Google cloud API
0:27
customers. So we are using this
0:29
application here. So you will see there
0:31
is a locality this uh
0:36
Delhi Delhi it is a city here. You can
0:38
also provide the zoom level. This is
0:40
width and height of the map and this is
0:42
a map type either it can be road map,
0:44
satellite, hybrid or terrain. So I will
0:46
be showing you example here. If you
0:48
click the get map button option here. So
0:51
as you will see it will show you this
0:53
image of this Google map here. So it's a
0:56
static image. You can save this image
0:57
onto your computer. Simply click save
1:00
and it will download it as a PNG image.
1:04
So now you can open locally inside your
1:06
computer. So this is very much useful in
1:09
those kind of situations whenever you
1:11
want some kind of snapshot of Google
1:14
maps. So this API is very much useful
1:17
Google map static API. So here you can
1:21
easily see the address which are
1:22
available on Google maps. So it is
1:25
downloaded as a PNG image. So here you
1:28
can change your address whatever address
1:29
that you want. Let me add another
1:32
address which is
1:36
this Kirin. So it is a locality in New
1:40
Delhi. So you can also change the uh
1:43
city as well. So based upon you need to
1:45
enter correct address here. Again you
1:48
can now also manipulate change the width
1:51
as well to 1200. And let's suppose you
1:54
also want to change height to 500. And
1:57
here road map map type. You can also
2:00
change the zoom level as well. But zoom
2:02
level is default to 13 position. So it
2:04
is correct. If you again click get map.
2:08
So now you will see it will show you
2:10
this.
2:11
The height is increased here. You will
2:13
see it is almost
2:16
500 pixels. And now you can see this is
2:19
the
2:22
Kirin locality address. So based upon
2:26
the address that you provide here inside
2:28
this input fields, you can generate
2:30
dynamic maps, Google maps. And once
2:32
again you can download this onto your
2:34
computer to further uh troubleshoot
2:37
whatever area that you need to find out.
2:39
So this is a very handy way by which you
2:43
can easily uh just take snapshots of
2:47
Google map based upon the location and
2:50
you can
2:52
further look upon the
2:55
areas.
2:57
[snorts] So this was the application
2:59
guys that we will be building in this
3:00
tutorial. So now to get started all the
3:04
source code that I am used inside this
3:06
tutorial I have given in the link in the
3:08
video description. So this is a blog
3:11
post link step-by-step blog post link
3:13
that here I have illustrated how to get
3:16
this. So this is a single index html
3:19
file is needed. So we have used some
3:21
bootstrap for just uh
3:25
making the UI purpose. So this is all
3:30
and also for JavaScript also because uh
3:33
for dynamically getting the values of
3:35
this locality, city, width, height, zoom
3:38
all that stuff. So for that we are use
3:40
some vanilla JavaScript. So for getting
3:42
all the source code go to the video
3:43
description to follow along with the
3:45
video. So now I will get you started how
3:48
to do this. So the very first thing that
3:50
you need to do is that this API is not
3:52
free as you know it's a Google cloud API
3:55
which is Google maps API. So first of
3:57
all you need to enable billing on this
3:59
project. You need to verify your card
4:02
and uh add your credit card on the API.
4:05
Once it is successful you will get an
4:07
API key. Once you are successfully sign
4:10
in on your cloud dashboard. Let me show
4:11
you the cloud dashboard here. So this is
4:14
my cloud dashboard. You can see this is
4:17
I have successfully have a Google cloud
4:21
account here in which premium APIs are
4:23
available. So this is Google maps
4:26
platform. So first of all if you log
4:28
inside your Google cloud account go to
4:31
the billing option here
4:33
and you need to enable you can see I
4:36
have you have multiple billing accounts.
4:38
So if you haven't have a billing account
4:40
you need to click on to create a billing
4:42
account. So it will automatically create
4:44
a billing account for you. After that
4:46
you can use this Google maps API. Google
4:49
maps API. So just go to APIs and
4:52
services and click on library. And here
4:55
you need to search for this API which is
4:58
uh
5:00
Google
5:02
maps static API. So just search for this
5:05
API.
5:07
You will see this will be the API that
5:09
we will be using. So click on this API
5:11
and simply enable this. I have already
5:13
enabled this. You will see API enabled.
5:16
Simply click on this enable options. So
5:18
enable the API [snorts] and then what we
5:20
want to do is that we want to create our
5:23
index html file. So login inside your
5:28
favorite text editor. I am using Visual
5:30
Studio Code Textriter. So just make
5:32
index HTML file. And make sure also guys
5:35
you need to also get the credentials as
5:38
well. So once you are logged in you will
5:41
need to get your credentials. Click on
5:43
credentials and uh
5:48
so here you need to click on create a
5:51
credentials here and uh for this you
5:53
only need the API key. So simply create
5:56
a API key and this will be the API key
6:00
created. So this will be different for
6:01
you. So don't use my API key. At the end
6:04
of this video, I will delete this API
6:06
key. So you would wouldn't be able to
6:09
use my API key because this is a premium
6:11
API. So I will just copy it for
6:13
illustration purpose. And then now I
6:16
will start my application building. So
6:18
just I will put the basic template code.
6:21
So I will change the title which is
6:23
Google Maps
6:26
static API example.
6:33
And now first of all I will show you a
6:35
very brief example how to load this API.
6:38
So if you haven't want to do any sort of
6:41
extra stuff you just need to load the
6:42
map on the screen. So for that there is
6:45
we only need to use the image tag for
6:48
that.
6:51
So I can just provide a title.
6:59
[snorts] So now you just need to provide
7:02
our image tag. That's it. This is the
7:05
only thing that you need to do. Image
7:06
just put image tag
7:09
and inside the source you need to plug
7:11
the URL which I will provide here. So
7:15
you you need to go to my video
7:17
description link. This is my blog post.
7:19
So simply you need to plug this URL.
7:21
This is the URL here. So if you open
7:24
this URL you will see the Google maps
7:27
platform server rejected your request
7:29
invalid request invalid size parameter.
7:34
So
7:37
all these request are inside the dynamic
7:40
URL. So once again if you do this you
7:43
can just uh Google maps static API.
7:48
If you just search on Google I will also
7:50
update the blog post as well. So this is
7:52
a very handy website which is
7:54
staticmapmaker.com.
7:56
And now you will see it will show you
7:58
this.
8:01
If you want to get the source code as a
8:04
PNG image, you can just use this. If you
8:09
so it will show you must use an API key
8:12
to authenticate each request for the
8:14
Google map platform API. So here we will
8:18
uh need to add a API key for in that
8:21
also. So
8:23
add option I will put and key K ey is
8:27
equal to and now we need to put our API
8:29
key. So this is I will just copy it. So
8:33
I will paste it here. So what it will do
8:36
is that it will
8:40
I will paste it. So now you will see
8:44
the provided API key is invalid. So let
8:47
me just see.
8:54
So I think we need to go to the billing
8:57
option first of all.
9:04
So you will have multiple billing
9:06
accounts here. So make sure that you are
9:08
on that billing account which is uh
9:12
on Google maps API. So there are
9:16
different billing accounts as well which
9:18
are different for Google maps and also
9:23
so click on dashboard. So make sure that
9:25
you select that account which are uh
9:37
So
9:39
this is this is the billing account that
9:41
we need to select. This is my maps API.
9:44
So
9:48
now what we can do is that we can go to
9:53
the credentials page.
10:00
So October 24th this one. is this one.
10:06
So what you need to do is that you need
10:08
to copy this this HTML code here. This
10:11
one. So just copy it
10:15
and inside the source you need to paste
10:17
this code here. That's it.
10:21
So you can see
10:28
this is the whole image tag which is
10:30
there.
10:36
So inside this you also need to attach
10:39
uh
10:47
your key parameter as well. So key is
10:49
equal to and here you need to copy paste
10:51
the key which is
10:54
you will get inside your dashboard.
11:00
So just copy it and paste it. So this is
11:04
your key. So if you open with live
11:06
server, so you will see now it will
11:08
display this map here. So on the screen
11:10
here. So this is Albany. And uh if you
11:14
open this URL
11:16
in the browser itself.
11:21
So if I just open this inside the
11:24
browser
11:25
which is uh open image and new tab. So
11:28
this will be a static app. You can see
11:31
you can download this save image as and
11:33
also here itself also you can right
11:35
click save image as onto your computer.
11:38
So this is a PNG image
11:44
[sighs] and now we can uh further
11:48
this is a very static way by which you
11:49
can load any sort of Google map inside
11:52
the browser. So here we are not using
11:54
any sort of JavaScript we are just
11:56
providing the API key. You can just see
11:58
here and now we can just extend this
12:01
application by providing dynamic
12:03
parameters.
12:05
[snorts] So
12:06
for that we need also need to include
12:09
the bootstrap as well. So
12:19
so we will only need the CSS part. So
12:22
simply copy this part and paste it.
12:31
And here first of all we will have uh
12:38
form group class of bootstrap. So here
12:40
we will put a input field. We will
12:43
attach the form control class of
12:45
bootstrap. So here we will give id of
12:49
locality
12:52
and the value I will provide the static
12:54
value which will be this value which
12:56
will be
12:58
shakuru. This is the locality which is
13:01
the default locality
13:04
and same we will repeat this for city as
13:08
well. So this will be city
13:14
and this will be equal to New Delhi. So
13:18
so you can just provide your default
13:19
values based upon your the address.
13:22
So the next field we will have for uh so
13:27
if you go to the video description I
13:29
don't want to make this video too long.
13:31
So you will get all the fields which I
13:34
we are using here which is locality city
13:37
and then we will have the zoom level
13:40
width height and then we will have a
13:42
simple radio button which will hold the
13:45
map type. [snorts] So basically if I
13:48
just copy these values
13:53
paste it. So let me just illustrate what
13:55
is happening. So if I open this with
13:57
live server. So you will see this is
14:00
first input field. Second this is a zoom
14:02
level. This is a you can just
14:05
select any range value. This is a range
14:08
slider.
14:09
Then we have width height and this is a
14:12
radio button. So you can select any
14:13
value.
14:16
So we can also attach a container class
14:18
right at the top
14:20
which is a bootstrap class.
14:32
So this will align this text little
14:35
better.
14:37
[snorts]
14:50
Let me just copy paste all the code that
14:52
is there. So,
14:59
so this is the body starting here. So,
15:08
so here the body has started. So, let me
15:11
just paste the score. That's it.
15:16
[snorts] So, now you will see it is
15:18
successfully aligned here. This is a
15:19
button out there. If you click this
15:21
button, the image will be shown to you.
15:23
So now you just need to write the simple
15:26
JavaScript code. So you will see inside
15:29
this image tag, we have provided a ID to
15:31
it of map and we will dynamically
15:35
will build this URL map URL based upon
15:38
all these parameters. So here we can
15:40
just write some javascript script tag.
15:49
So
15:51
so as you can see we have attached on
15:53
click here. So when we click this button
15:55
this function will execute. So function
15:58
get map.
16:01
So first of all we can get locality
16:03
value which is document get element by
16:07
id locality.
16:11
dot value
16:13
same will be for city
16:16
document dot getelement by id city
16:20
value. [snorts]
16:22
So after getting locality city we also
16:24
need to get the zoom level all that
16:27
stuff. So once again I will copy paste
16:29
it. So you can get all the source code
16:32
by going to the video description. This
16:34
is width, height, zoom level and map map
16:37
type
16:46
like this. You can see and once again
16:49
now to put this
16:52
we will just copy paste these three
16:54
lines of code. So after [snorts] getting
16:56
all the values here inside the
16:57
respective variables locality, city,
17:00
width, height, zoom and map type, we can
17:03
build the URL map URL like this. You
17:06
will see this is the static URL and
17:08
inside this we are placing these dynamic
17:11
variables. So we are using this syntax
17:14
here. This is a template lit. So this is
17:18
a dollar sign. This is a variable here
17:21
that we are placing here. locality,
17:23
city, zoom, width, height and map type.
17:27
And at last you need to attach your own
17:29
API key. So simply we can paste this API
17:32
key that we have copy pasteed. So this
17:35
is our API key. Simply
17:39
copy to [snorts] clipboard and paste it.
17:42
And lastly we can attach this to the map
17:45
like this map.source.
17:48
So if I open this with live server,
17:52
if I get map, you will see this is our
17:55
map is ready. You can also change this
17:58
to satellite also. Click get map. You
18:00
will see this is a satellite picture.
18:03
You can save this image as well. So
18:06
various method types you can try out.
18:08
This is a satellite picture here.
18:11
So this is
18:13
you can also click hybrid as well.
18:17
So this is hybrid. So once again save
18:20
this image. So you will see this is
18:22
hybrid here. So different map types are
18:25
there.
18:29
And lastly we have terrain which is this
18:32
one.
18:34
This is same but using road map as well.
18:36
So it not a lot of difference.
18:40
You can also manipulate the width
18:44
also change the address as well. So,
18:51
so if I change let's suppose I change to
18:53
a different location. So,
19:00
locality in
19:22
Let me try out this here. So if I
19:24
provide this and it is there inside
19:27
London. So I can just put this.
19:34
So you will see now it will also show
19:37
various uh places inside the world. You
19:39
can pick any place. If you know the
19:41
address, you can plug this and you will
19:44
get the image of the map based upon the
19:46
location. So you will see we have
19:48
provided London here. So it is showing
19:51
the exact location that we provided. So
19:53
this is the application guys hopefully
19:56
that you like this video and if you want
19:58
to get all the source code go to the
19:59
video description. So this is the Google
20:02
map static API example to load static
20:04
maps based upon the location. So thanks
20:07
very much for watching this video.