How to show google map in Spring Boot Application

watch the video

step1 : get google map api key

go to below site

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

choose select a project

click on new project

give project name

select created project

choose maps js api

click on enable

now its time to create api key

choose credentials

click on create credentials

choose api key

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

next step

create spring boot app with dependencies

lombok , spring web , thymeleaf

Create MapController.java in controller package

also create index.html in templates folder

Directory Structure

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

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

Blog

How to show google map in Spring Boot Application

realNameHidden

Join Our Newsletter. No Spam, Only the good stuff.

Related