0

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?

tereško
  • 58,060
  • 25
  • 98
  • 150
Sachu
  • 7,555
  • 7
  • 55
  • 94
  • You have not shown your model and how you pass the points to the view, but [this question/answer](http://stackoverflow.com/questions/33817069/pushing-values-to-javascript-array-returning-lots-of-errors/33817500#33817500) may help –  Jan 27 '16 at 06:31
  • @StephenMuecke i edited my question accordingly..Now the map is displaying but the markups are not coming. – Sachu Jan 27 '16 at 07:19
  • Is the `points` array populated correctly? Also I suspect that your `latitude` and `longitude ` properties should be numeric (`decimal`) not `string`. If you cannot change the model, try `points.push({ lat: Number(item.latitude), lng: Number(item.longitude) })` –  Jan 27 '16 at 07:25
  • @StephenMuecke when iam doing `alert(points[i]);` it give me [object Object]. and i tried `points.push({ lat: Number(item.latitude), lng: Number(item.longitude) })` – Sachu Jan 27 '16 at 07:30
  • 1
    Use `console.log(points[i])` for debugging your code (not `alert()`) and inspect the output - you can expand the output and check each property. –  Jan 27 '16 at 07:31
  • @StephenMuecke let me check..one doubt..I am passing model as Ipagelist..is there any issue in that? – Sachu Jan 27 '16 at 07:34
  • Not sure, but suggest you test with just `@model IEnumerable` –  Jan 27 '16 at 07:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101749/discussion-between-sachu-and-stephen-muecke). – Sachu Jan 27 '16 at 08:01

1 Answers1

1

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);
  });
}