ASP.NET MVC

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>
<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:

You can download the source code from here

Faisal Pathan

Faisal Pathan is a founder of TheCodeHubs, .NET Project Manager/Team Leader, and C# Corner MVP. He has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET Core, ASP.NET MVC, AngularJS, Angular, React, NodeJS, Amazon S3, Web API, EPPlus, Amazon MWS, eBay Integration, SQL, Entity Framework, JavaScript, eCommerce Integration like Walmart, Tanga, Newegg, Group-on Store, etc. and Windows services.