Post
Ask Question

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

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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SatyaGoogleMapBootstrapMVC.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.         public ActionResult Details()  
  19.         {  
  20.             return View();  
  21.         }  
  22.         public ActionResult Animate()  
  23.         {  
  24.             return View();  
  25.         }  
  26.         public ActionResult Icon()  
  27.         {  
  28.             return View();  
  29.         }  
  30.     }  
  31. } 
 Create a View file named "Icon.cshtml".
  1. @{  
  2.     ViewBag.Title = "Satyaprakash Google Map InfoWindow";  
  3. }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map InfoWindow Using MVC and BOOTSTRAP</h2>  
  8. <fieldset>  
  9.     <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Google Map InfoWindow</legend>  
  10.     <meta charset="utf-8">  
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  12.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  13.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  14.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  15.   
  16.     <div id="map" style="width:100%;height:500px"></div>  
  17.     <script>  
  18.         function myMap() {  
  19.             var mapCanvas = document.getElementById("map");  
  20.             var myCenter = new google.maps.LatLng(20.296100, 85.824500);  
  21.             var mapOptions = { center: myCenter, zoom: 12 };  
  22.             var map = new google.maps.Map(mapCanvas, mapOptions);  
  23.             var marker = new google.maps.Marker({  
  24.                 position: myCenter,  
  25.                 icon: "Flag.png"  
  26.             });  
  27.             marker.setMap(map);  
  28.             var contentString = '<div id="content">' +  
  29.             '<div id="siteNotice">' +  
  30.             '</div>' +  
  31.             '<h1 id="firstHeading" class="firstHeading" Style="Color:Blue">Kulu Biography</h1>' +  
  32.             '<div id="bodyContent">' +  
  33.             '<p><b>Satyaprakash Samantaray</b>, Is My <b>Full Name</b>, ' +  
  34.             'Bhubaneswar Is my HomeTown , The Capital of Orissa State Occupy ' +  
  35.             'the Position 1 in Smart City List In India.' +  
  36.             '<p>Attribution: Bhubaneswar , <a href="https://en.wikipedia.org/wiki/Bhubaneswar">' +  
  37.             'https://en.wikipedia.org/wiki/Bhubaneswar</a> ' +  
  38.             '(Go Through This).</p>' +  
  39.             '</div>' +  
  40.             '</div>';  
  41.             var infowindow = new google.maps.InfoWindow({  
  42.                 content: contentString  
  43.             });  
  44.   
  45.             //var infowindow = new google.maps.InfoWindow({  
  46.             //    content: "KULU'S HOME TOWN"  
  47.             //});  
  48.   
  49.             marker.addListener('click', function () {  
  50.                 infowindow.open(map, marker);  
  51.             });  
  52.   
  53.   
  54.         }  
  55.     </script>  
  56.   
  57.     <script src="https://maps.googleapis.com/maps/api/js?key=put_your_key&callback=myMap"></script>  
  58.   
  59. </fieldset>  
  60. <footer>  
  61.     <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@  
  62. </footer> 
 Here, I have used an InfoWindow in two ways.
  1. var infowindow = new google.maps.InfoWindow({  
  2.     content: "KULU'S HOME TOWN"  
  3. }); 
This text will pop up when Google Maps loads for the first time. There is no need to click on the image icon.
  1. var contentString = '<div id="content">' +  
  2.             '<div id="siteNotice">' +  
  3.             '</div>' +  
  4.             '<h1 id="firstHeading" class="firstHeading" Style="Color:Blue">Kulu Biography</h1>' +  
  5.             '<div id="bodyContent">' +  
  6.             '<p><b>Satyaprakash Samantaray</b>, Is My <b>Full Name</b>, ' +  
  7.             'Bhubaneswar Is my HomeTown , The Capital of Orissa State Occupy ' +  
  8.             'the Position 1 in Smart City List In India.' +  
  9.             '<p>Attribution: Bhubaneswar , <a href="https://en.wikipedia.org/wiki/Bhubaneswar">' +  
  10.             'https://en.wikipedia.org/wiki/Bhubaneswar</a> ' +  
  11.             '(Go Through This).</p>' +  
  12.             '</div>' +  
  13.             '</div>';  
  14.             var infowindow = new google.maps.InfoWindow({  
  15.                 content: contentString  
  16.             });  
  17.   
  18. marker.addListener('click', function () {  
  19.                 infowindow.open(map, marker);  
  20.             }); 
This text pops up when you click on the image icon.
 
OUTPUT

Desktop View

 
 
 Mobile View