How to show google map in Spring Boot Application
Tags: springboot, googlemaps, maps, thymeleaf
Published: 2023-04-24 16:33:46

watch the video 

{% embed https://youtu.be/5G_MfwsGUIo %}

step1 : get google map api key

go to below site

https://console.cloud.google.com/getting-started

choose select a project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhfaul4pdw7irzj7ozps.png)

click on new project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnx2dbtfdue6e5p73j2v.png)

give project name 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjaq4udqb6jju8q1cmdy.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4a913s7d1h5jdnb43m7n.png)

select created project


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq3e13dnc9a20rrg39lx.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thxs72nixvt2hwfk9cye.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vngkuv3k36ngoj14kz2w.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x6jn4h360ll79zk2qyp.png)

choose maps js api

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn7zok7wi7ozd71d4haa.png)

click on enable


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lr05csrikvnljv4fnw7.png)

now its time to create api key

choose credentials

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z15xfi2y0q48mt9tjy1m.png)

click on create credentials

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7efa4c3e8brek4f3zyw.png)

choose api key


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl353qb3zmyl2p4pibwh.png)

click on show key you can see the key
you can use this key in your app

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xi4k45pdyiayihs0q63.png)


next step

create spring boot app with dependencies

lombok , spring web , thymeleaf


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koyi6oj9p53bu8y1gvdt.png)

Create MapController.java in controller package

also create index.html in templates folder


Directory Structure


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdjmgqssjqyhu6pmn9ek.png)

index.html

**Note : Make sure 
 "mapsApiKey": "you_api_key_that_you_created"
you should give your api key at this place in index.html "you_api_key_that_you_created"**

```
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "you_api_key_that_you_created"
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [19.0760,  72.8777, 'Mumbai'],
          [18.5204, 73.8567, 'Pune'],
          [19.1176, 72.9060, 'Powai'],
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 800px; height: 700px"></div>
  </body>
</html>
```

MapController.java

```
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MapController {
	
	@GetMapping("/showMap")
	public String index() {
		return "index";
	}
}

```


Now run the application

give url
http://localhost:8080/showMap
in browser

you will see result as below


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jms3xzpi6duc8p5bnmgr.png)


if you want to remove the "for development only " you must enable billing account



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/warjw2vqwapgk5rf95kf.png)