Google Map Integration In ASP.NET MVC

Here, we will learn about integrating google map API key in ASP.NET MVC. We can search for the map for any place by using the city name and country name for the region we have to search.

First, we need to get our API key for the maps.

Go to URL and navigate to APIs and Services


Tottogle the project dropdown.


Create a new project


Enter the project name and click ok

Now your project will be created in some time. Navigate to credential.


Create credentials and click API key


A dialog will be prompted which contains the API key so copy that and keep it in a secure place.

Go to the library


Search for Maps Javascript API and Enable it.

After that again search for Geocoding API and Enable it.


That’s it. You have successfully completed all the steps.

Create a new project in ASP.NET MVC and open the View -> Shared -> _Layout.cshtml file

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
    <link rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
    <div class="container body-content">
        <hr />
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    @RenderSection("scripts", required: false)

Replace the YOUR-API-KEY with the key you get in the credentials.

Navigate to View -> Home -> Index.cshtml

    ViewBag.Title = "Home Page";
<div class="row">
    <div class="form-group col-md-4">
        <input type="text" name="city" class="form-control" value="Surat" id="txtCity" />
    <div class="form-group col-md-4">
        <input type="text" name="country" class="form-control" value="India" id="txtCon" />
    <div class="form-group col-md-4">
        <input type="button" id="btn" class="btn btn-info" value="Search" />
<div id="map-canvas" style="height: 500px; width: 500px">
    $(document).ready(function () {
        $("#btn").click(function () {
            var geocoder = new google.maps.Geocoder();
            var con = document.getElementById('txtCon').value;
            var city = document.getElementById('txtCity').value;
            var com = city + "," + con;
            geocoder.geocode({ 'address': com }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var x = results[0];
                    var y = results[0].geometry.location.lng();
                    var latlng = new google.maps.LatLng(x, y);
                    var myOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(x, y),
                        map: map,
                        title: com
                    var infowindow = new google.maps.InfoWindow({
                        content: com
          , marker);
                    google.maps.event.addDomListener(window, 'load');
                } else {
                    res.innerHTML = "Enter correct Details: " + status;



You can download the source code from here


1 Comment

  1. alex

    Is it Microsoft Visual Studio 2019 ASP.NET Core MVC project?


Submit a Comment

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


Select Categories