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;
  7. namespace SatyaGoogleMapBootstrapMVC.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. //
  12. // GET: /Home/
  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. }
  5. <title>@ViewBag.Title</title>
  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>
  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. });
  45. //var infowindow = new google.maps.InfoWindow({
  46. // content: "KULU'S HOME TOWN"
  47. //});
  49. marker.addListener('click', function () {
  50. infowindow.open(map, marker);
  51. });
  54. }
  55. </script>
  57. <script src="https://maps.googleapis.com/maps/api/js?key=put_your_key&callback=myMap"></script>
  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. });
  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