create table with GEOGRAPHY column

API.cs

 public class Landmark
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Latitude { get; set; }
        public string Longitude { get; set; }
        public string Distance { get; set; }
    }
    public class LandmarkController : ApiController
    {
        public IEnumerable<Landmark> GetLandmarks(string longitude, string latitude, int radius = 0, int returnNumber = 20)
        {
            //TODO [Aza] - [IOC] - spike for projects maps 
            var result = new List<Landmark>();

            using (var cnn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["core"].ConnectionString))
            {
                cnn.Open();
                using (var cmd = new SqlCommand("[dbo].[LendleaseGetNearbyLandmarks]", cnn))

                {
                    cmd.CommandType=CommandType.StoredProcedure;
                    
                    cmd.Parameters.Add("@Lat", SqlDbType.VarChar).Value = latitude;
                    cmd.Parameters.Add("@Long", SqlDbType.VarChar).Value = longitude;
                    cmd.Parameters.Add("@Radius", SqlDbType.Int).Value = radius;
                    cmd.Parameters.Add("@ReturnNumber", SqlDbType.Int).Value = returnNumber;


                    using (var reader = cmd.ExecuteReader())
                    {
                        //read the data
                        while (reader.Read())
                        {
                            result.Add(new Landmark()
                            {
                                Id = reader["Id"].ToString(),
                                Title = reader["Title"].ToString(),
                                Distance = reader["Distance"].ToString(),
                                Latitude = reader["Latitude"].ToString(),
                                Longitude = reader["Longitude"].ToString(),

                            });

                        }
                    }

                }
                cnn.Close();
            }



            return result;
        }

GetNearbyLandmarks.sql

create 
 PROCEDURE [dbo].[GetNearbyLandmarks]
	@Lat VARCHAR(20),
	@Long VARCHAR(20),
	@Radius INT,
	@ReturnNumber INT
AS
BEGIN
	DECLARE @g geography = 'POINT(' + @Long + ' '+ @Lat + ')'; 

	
	IF(@Radius != 0)
	BEGIN
		DECLARE @region geography = @g.STBuffer(@Radius);
		 
		SELECT TOP(@ReturnNumber) 
				id ,
				title,
				CAST ([GeoLocation].STDistance(@g) as varchar(20)) as Distance,
				CAST ([GeoLocation].Lat as varchar(10)) as Lat,
				CAST ([GeoLocation].Long as varchar(10)) as  Lng 
			FROM [LendleaseLandmark] 
			WHERE  [GeoLocation].Filter(@region) = 1 
			ORDER BY [GeoLocation].STDistance(@g);
	END
	ELSE
	BEGIN
		SELECT TOP(@ReturnNumber) 
				id ,
				title,
				CAST ([GeoLocation].STDistance(@g) as varchar(20)) as Distance,
				CAST ([GeoLocation].Lat as varchar(10)) as Lat,
				CAST ([GeoLocation].Long as varchar(10)) as  Lng 
			FROM [LendleaseLandmark] 
			Where [GeoLocation] IS NOT NULL
			ORDER BY [GeoLocation].STDistance(@g);
	END
END

Landmark.sql

GO
CREATE TABLE [dbo].[Landmark] (
    [ID]                INT IDENTITY(1, 1),
    [Title]      VARCHAR(100),
    [Latitude]          FLOAT,
    [Longitude]         FLOAT,
	[GeoLocation] GEOGRAPHY
)
GO

INSERT INTO [dbo].[Landmark] ( [Title],  [Latitude], [Longitude] )
VALUES ( 'Statue of Liberty',  40.689168,-74.044563 ),
		( 'Eiffel Tower',  48.858454, 2.294694),
		( 'Leaning Tower of Pisa',  43.72294, 10.396604 ),
		( 'Great Pyramids of Giza',  29.978989, 31.134632 ),
		( 'Sydney Opera House', -33.856651, 151.214967 ),
		( 'Taj Mahal',  27.175047, 78.042042 ),
		( 'Colosseum',  41.890178, 12.492378 ),
		( 'Bondi Beach', -33.890542, 151.274856),
		( 'Coogee Beach', -33.923036, 151.259052),
		( 'Manly Beach', -33.80010128657071, 151.28747820854187),
		( 'Maroubra Beach', -33.950198, 151.259302),
		( 'brookvale', -33.7623451, 151.27105729999994),
		( 'manly vale', -33.783817, 151.26705779999998),
		( '42a manly vale burchmore ', -33.7863944, 151.27346520000003),
		( '48 manly vale burchmore ', -33.7865147, 151.27306529999998),
		( '42 manly vale burchmore ', -33.7865005, 151.2734021),
		( '46 manly vale burchmore ', -33.786419, 151.27312400000005),
		( '52 manly vale burchmore ', -33.786762, 151.27324599999997),
		( '47 manly vale burchmore ', -33.787153, 151.27225699999997),
		( '52 manly vale burchmore ', -33.786762, 151.27324599999997),
		( '49 manly vale burchmore ', -33.787153, 151.27225699999997),
		( '44 manly vale burchmore ', -33.786321, 151.273145),
		( 'Tehran', 35.6961, 51.4231),
		( 'Tabriz', 38.0667, 46.3000),
		( 'chatswood train station',  -33.7974635, 151.18102499999998 ),
		( 'chatswood coree rd', -33.8044762, 151.18455319999998),
		( 'chatswood ellis st', -33.7998575, 151.1798453)

GO
UPDATE [dbo].[LendleaseLandmark]
SET [GeoLocation] = geography::STPointFromText('POINT(' + CAST([Longitude] AS VARCHAR(20)) + ' ' + 
                    CAST([Latitude] AS VARCHAR(20)) + ')', 4326)
GO

testGetNearbyLandmarks.sql

GO
 EXEC [dbo].[GetNearbyLandmarks] -33.796628999999996,151.1797623,150,50

 EXEC [dbo].[GetNearbyLandmarks] -33.796628999999996,151.1797623,0,50

view.cshtml

@model dynamic

@*it's a test page please don't judge me :p*@
<div class="container">

    <style>
        #map {
            min-height: 600px;
            width: 100%;
            background-color: gray;
        }
    </style>


    <div>
        <p > user location: <span id="userloc"></span></p>
    </div>
    <div>
        <input type="search" id="address">
        <input type="button" value="Submit" onclick="codeAddress()">
        <p> search location: <span id="searchloc"></span></p>
    </div>
   

    <div id="map"></div>

    <script>
       
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                $("#userloc").html( "Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            $("#userloc").html("Latitude: " + position.coords.latitude +" Longitude: " + position.coords.longitude);
            //update map
            UpdateMap(position.coords.latitude, position.coords.longitude);
        }

        function UpdateMap(lat, long) {
            var loc = new google.maps.LatLng(lat, long);
            var url = "/global/api/Landmark/GetLandmarks?latitude={lat}&longitude={long}&radius={r}&returnNumber={n}";
            url = url.replace("{lat}", lat).replace("{long}", long).replace("{r}", 0).replace("{n}", 5);
            $.get(url, function (data) {
                console.log(data);
                var locations = data;
               
                var mapOptions = {
                   
                    center: loc,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById('map'), mapOptions);

                var infowindow = new google.maps.InfoWindow();

                
                var markers = [];;

                for (var i = 0; i < locations.length; i++) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
                        map: map
                    });
                    markers.push(marker);
                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i].Title + " distance:" + locations[i].Distance);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }

                var locmarker = new google.maps.Marker({
                    position: loc,
                    map: map,
                    icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                });

                var bounds = new google.maps.LatLngBounds();
                for (var m = 0; m < markers.length; m++) {
                    bounds.extend(markers[m].getPosition());
                }
                bounds.extend(loc);

                map.fitBounds(bounds);

                google.maps.event.addListenerOnce(map, 'bounds_changed', function (event) {
                    console.log("bounds.getCenter: " + bounds.getCenter());
                    map.setCenter(loc);
                    console.log("map.getCenter: " + map.getCenter());
                    map.setZoom(map.getZoom() - 1);
                });
            

            });
        }
    </script>


    <script>
       
        var geocoder;
        function initMap() {
            getLocation();
            geocoder = new google.maps.Geocoder();

        }

    </script>


    <script>
       

        function codeAddress() {
            var input = document.getElementById("address");
            var autocomplete = new google.maps.places.Autocomplete(input);
            var address = document.getElementById("address").value;
            geocoder.geocode({ 'address': address }, function (r, s) {
                if (r[0] && r[0].geometry.location) {
                    console.log(r[0].geometry.location);
                   
                    //update map
                    $("#searchloc").html("Latitude: " + r[0].geometry.location.lat() + " Longitude: " + r[0].geometry.location.lng());
                    UpdateMap(r[0].geometry.location.lat(), r[0].geometry.location.lng());

                }
              
            });
        }
    </script>


    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key={yourkey}&signed_in=true&libraries=places&callback=initMap"></script>

</div>