Hospital Locator User Control using Google Maps

Hi Guys,

This post is just a continuation of my previous post. I made a user control when given a hospital id finds the closest three hospitals and marks them on the map. My colleague asked me to use Google Maps instead of Bing. Hope you like it.

1) MapControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MapUserControl.ascx.cs" Inherits="MapControl.MapUserControl" %>
<style>
      #map-canvas {
        height: 500px;
        margin: 0px;
        padding: 0px
      }

    #divLegend {
        color:#305b76;font-size:12px;font-family:Arial;padding:10px 10px 0 0;
    }

      fieldset { border:1px solid #C8D3DA }

legend {
  padding: 0.2em 0.5em;
  border:1px solid #C8D3DA;
  color:#426982;
  font-size:90%;
  text-align:right;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      
        var hospitalId,infowindow;
        function initialize() {
            var map;
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(23, 46)
            }
            map = new google.maps.Map(document.getElementById('map-canvas'),
                                         mapOptions);
            
            hospitalId = $(<%= string.Format("'#{0}'",hfHospitalID.ClientID) %>).val();

            $.get(<%= string.Format("'{0}'",this.ResolveClientUrl("~/controls/MapControl/MapService.svc")) %> +
           "/GetClosestHospitals?hospitalId="+ hospitalId +"&topCount=3"
           , function (data, status) {
               var myLatLng, beachMarker;
              
               
               
               if (map) {
                  
                   for (var i = 0; i < data.length; i++) {
                      
                       myLatLng = new google.maps.LatLng(data[i].Latitude, data[i].Longtitude);
                       beachMarker = new google.maps.Marker({
                           position: myLatLng,
                           map: map,
                           icon: <%= string.Format("'{0}'",this.ResolveClientUrl("~/images/Hospital.png")) %>


                       });

                       if(data[i].HospitalID == hospitalId)
                       {
                           beachMarker.setIcon(<%= string.Format("'{0}'",this.ResolveClientUrl("~/images/Current.png")) %>);   
                           
                           // using global variable:
                           map.setZoom(10);
                           map.setCenter(myLatLng);
                       }

                       beachMarker.setTitle(data[i].HospitalNameAr + ' - '+ data[i].HospitalNameEn);
                       
                       attachMessage(beachMarker,data[i],i);
                      

                   }           

               }

           });

            function attachMessage(marker, data ,num) {
                
                var content = '<h5>' + data.HospitalNameAr + ' - '+ data.HospitalNameEn + '</h5><br/>'
                                + data.DirectorateNameAr + ' - '+ data.DirectorateNameEn +'<br/>'
                                + data.RegionNameAr + ' - '+ data.RegionNameEn +'<br/>';
                if (data.HospitalID != hospitalId)
                    content += 'بعد - ' + 'Distance ' +data.DistanceKM + '<b> KM</b><br/>';

                content += data.Latitude + ','+ data.Longtitude +'<br/>';


                var infowindow = new google.maps.InfoWindow({
                    content: content
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(marker.get('map'), marker);
                });
            }
               

        }

        google.maps.event.addDomListener(window, 'load', initialize);

           </script>
<fieldset style="padding: 5px">
    <legend><asp:Literal ID="tblStep0Title" runat="server" EnableViewState="false" Text="<%$ Resources:ReferralResource, Map_Legend%>"></asp:Literal></legend>
    <div id="divLegend">
        <table>
            <tr>
                <td style="padding: 0px 10px 0px 10px"><asp:Literal ID="Literal1" runat="server" EnableViewState="false" Text="<%$ Resources:ReferralResource, Map_HospitalClose%>"></asp:Literal></td>
                <td><img src=<%= string.Format("'{0}'",this.ResolveClientUrl("~/images/Hospital.png")) %> /></td>
           
                <td style="padding:0px 10px 0px 10px"> <asp:Literal ID="Literal2" runat="server" EnableViewState="false" Text="<%$ Resources:ReferralResource, Map_YourHospital%>"></asp:Literal></td>
                <td><img src=<%= string.Format("'{0}'",this.ResolveClientUrl("~/images/Current.png")) %> /></td>
            </tr>
        </table>
              

    </div>
    <br />
 <div id="map-canvas"></div>
<input type="hidden" id="hfHospitalID" runat="server" />

    </fieldset>