CODEWITHSUNDEEP
asp.net-mvcgoogle-mapsasp.net-mvc-4
Sachu
Sachu

Reputation: 7766

How to show multiple latitude and longitude at a time in google map in MVC with tooltip

I created a view to show google map with multiple markers. But it is not showing the markers the map is visible. There can be some issue in the script to show the map.

Model

public class hospital
{
    [Key]
    public int P_ID { get; set; }
    public string latitude { get; set; }
    public string longitude { get; set; }
    public string hospitalspeciality { get; set; }
    public string hospitalname { get; set; }
}

In my controller I am creating a page-list item of this model and passing to the view

My view

  @model PagedList.IPagedList<Myproj.Models.Hospital>
    @using PagedList;
    @using PagedList.Mvc;

    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false">
    </script>
    <script type="text/javascript">


            window.onload = function initialize() {
                var model = @Html.Raw(Json.Encode(Model));
                points = [];
                $.each(model, function (index, item) {
                    points.push({ lat: Number(item.latitude),lng: Number(item.longitude)})
                })

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   center: { lat: 25.1972018, lng: 55.2721877 },
                   zoom: 12
                });
                for (var i = 0; i < points.length; i++) {
                    var marker = new google.maps.Marker({ position: points[i] });
                    marker.setMap(map);
                }
            }
    </script>

<body>
<form id="form1" onload="initialize()">

<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
 <th >
Hospital Speciality
</th>
<th>
Hospital Name
</th>
 </thead>
<tbody>
 @if (Model != null && Model.Count() > 0)
 {
  foreach (var item in Model)
 {
 <tr>
 <td>
  @Html.DisplayFor(modelItem => item.hospitalspeciality)


  </td>
    <td>  
@Html.DisplayFor(modelItem => item.hospitalname)
    </td>
     </tr>
    }
     <tr>


      <td colspan="10">
        <div id='Paging' style="text-align:center">
        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
        of @Model.PageCount  
@Html.PagedListPager(Model, page => Url.Action("Search", "Hospital", new
        {
        page
        }))
        </div>
        </td>
        </tr>
        }
           </tbody>
         </table>
        <table class="table table-striped table-hover table-bordered" id="sample_editable_2">
        <tr>
        <td>
        <div id="map_canvas" style="width: 1300px; height: 600px"></div>
        </td>
        </tr>
         </table>

        </form>
        </body>

It is showing the map correctly. I need to show a title to each marker with the hospital name in the map.is it possible?

Upvotes: 0

Views: 1379

Answers (1)

user3559349
user3559349

Reputation:

I assume by show a title to each marker with the hospital name you mean to add a tooltip that displays when you hover over the marker.

You need to modify your code to include the name in the title property of Marker

window.onload = function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: { lat: 25.1972018, lng: 55.2721877 },
    zoom: 12
  });

  var model = @Html.Raw(Json.Encode(Model));
  $.each(model, function (index, item) {
    var name = item.hospitalname;
    var point = { lat: Number(item.latitude), lng: Number(item.longitude)};
    var marker = new google.maps.Marker({ 
      position: point,
      title: name
    });
    marker.setMap(map);
  });
}

Upvotes: 1

Related Questions