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

google-map-integration-in-asp-net-mvc-1

Tottogle the project dropdown.

google-map-integration-in-asp-net-mvc-2

Create a new project

google-map-integration-in-asp-net-mvc-4

Enter the project name and click ok

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

google-map-integration-in-asp-net-mvc-5

Create credentials and click API key

google-map-integration-in-asp-net-mvc-6

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

Go to the library

google-map-integration-in-asp-net-mvc-8

Search for Maps Javascript API and Enable it.

After that again search for Geocoding API and Enable it.

google-map-integration-in-asp-net-mvc-11

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>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

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>
    <div class="form-group col-md-4">
        <input type="text" name="country" class="form-control" value="India" id="txtCon" />
    </div>
    <div class="form-group col-md-4">
        <input type="button" id="btn" class="btn btn-info" value="Search" />
    </div>
</div>
<div id="map-canvas" style="height: 500px; width: 500px">
</div>
<script>
    $(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].geometry.location.lat();
                    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
                    });
                    infowindow.open(map, marker);
                    google.maps.event.addDomListener(window, 'load');
                } else {
                    res.innerHTML = "Enter correct Details: " + status;
                }
            });
        });
    });
</script>

Output:

output

You can download the source code from here

 

1 Comment

  1. alex

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

    0
    0
    Reply

Submit a Comment

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

Subscribe

Select Categories