Google Maps InfoWindow Using Bootstrap In ASP.NET MVC - Part Five

Google Maps InfoWindow Using Bootstrap In ASP.NET MVC.

Introduction

In this part, we will give an InfoWindow with some text content for a marker or image. Follow my Google Maps Part-1-4 blogs before you go through to part 5. 

Description

Here, you can add site link url, images, text etc.

Steps

Create a Controller class file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SatyaGoogleMapBootstrapMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Details()
        {
            return View();
        }
        public ActionResult Animate()
        {
            return View();
        }
        public ActionResult Icon()
        {
            return View();
        }
    }
}

 Create a View file named "Icon.cshtml".

@{
    ViewBag.Title = "Satyaprakash Google Map InfoWindow";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map InfoWindow Using MVC and BOOTSTRAP</h2>
<fieldset>
    <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Google Map InfoWindow</legend>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div id="map" style="width:100%;height:500px"></div>
    <script>
        function myMap() {
            var mapCanvas = document.getElementById("map");
            var myCenter = new google.maps.LatLng(20.296100, 85.824500);
            var mapOptions = { center: myCenter, zoom: 12 };
            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({
                position: myCenter,
                icon: "Flag.png"
            });
            marker.setMap(map);
            var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading" Style="Color:Blue">Kulu Biography</h1>' +
            '<div id="bodyContent">' +
            '<p><b>Satyaprakash Samantaray</b>, Is My <b>Full Name</b>, ' +
            'Bhubaneswar Is my HomeTown , The Capital of Orissa State Occupy ' +
            'the Position 1 in Smart City List In India.' +
            '<p>Attribution: Bhubaneswar , <a href="https://en.wikipedia.org/wiki/Bhubaneswar">' +
            'https://en.wikipedia.org/wiki/Bhubaneswar</a> ' +
            '(Go Through This).</p>' +
            '</div>' +
            '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            //var infowindow = new google.maps.InfoWindow({
            //    content: "KULU'S HOME TOWN"
            //});

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });


        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=put_your_key&callback=myMap"></script>

</fieldset>
<footer>
    <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

 Here, I have used an InfoWindow in two ways.

var infowindow = new google.maps.InfoWindow({
    content: "KULU'S HOME TOWN"
});

This text will pop up when Google Maps loads for the first time. There is no need to click on the image icon.

var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading" Style="Color:Blue">Kulu Biography</h1>' +
            '<div id="bodyContent">' +
            '<p><b>Satyaprakash Samantaray</b>, Is My <b>Full Name</b>, ' +
            'Bhubaneswar Is my HomeTown , The Capital of Orissa State Occupy ' +
            'the Position 1 in Smart City List In India.' +
            '<p>Attribution: Bhubaneswar , <a href="https://en.wikipedia.org/wiki/Bhubaneswar">' +
            'https://en.wikipedia.org/wiki/Bhubaneswar</a> ' +
            '(Go Through This).</p>' +
            '</div>' +
            '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

marker.addListener('click', function () {
                infowindow.open(map, marker);
            });

This text pops up when you click on the image icon.

 

OUTPUT

Desktop View

 

 

 Mobile View