During the building of Realintory, a Cloud based SaaS application to manage real estate inventory, I ran into a situation where I needed to pull a static map of a location and a street view image of it from the Google Maps API.

Adding Google Maps API integration to an ASP.NET MVC app is pretty simple and this is a sample on how to do it in C# using ASP.NET MVC 5. Now this sample is quick and in the live code base it actually pulls these images asynchronously and stores them into Azure Blobs but you may just want to display them in your view.

On the View

The code is fairly straight forward here, the address does not need to be hard coded you can retrieve it from somewhere else of your choosing on the view, like an input control.

This is just making the call out to the controller and calling the ShowGoogleStreetViewPhoto(String googleStreeViewAddress) and ShowGoogleStaticMap(String googleStaticMapAddress).

<img src="@Url.Action("ShowGoogleStreetViewPhoto", new { googleStreeViewAddress = "Bryant Park, New York, NY" })" />

<img src="@Url.Action("ShowGoogleStaticMap", new { googleStaticMapAddress = "Bryant Park, New York, NY" })" />

On the Controller

We need two functions on the controller to return a FileResult back to the View, basically each will return an image file.

public FileResult ShowGoogleStreetViewPhoto(
String googleStreeViewAddress)
{
     //Size up to 640-640 on the free version
     Task<byte[]> result =   
     GetStreetViewImage(googleStreeViewAddress,"500x500");

    //Quick check to see if we have an image
    if (result == null)
           return null;

    var file = result.Result;
    return File(file, "image/jpeg");
}


public FileResult ShowGoogleStaticMap(
String googleStaticMapAddress)
{
    //Size up to 640-640 on the free version
    Task<byte[]> result =
    GetStaticMap(googleStaticMapAddress, "500x500");

    //Quick check to see if we have an image
    if (result == null)
           return null;

    var file = result.Result;
    return File(file, "image/jpeg");
}

You may have noticed that they each call two other functions on the controller, or wherever you want to place them, to grab the actual images from google.

These functions are very similar you may only want one of them if you want to just return an image or maybe just a static map.

public async Task<byte[]> GetStreetViewImage(
string location, string size)
{
    if (string.IsNullOrEmpty(location))
    {
        return null;
    }

    try
    {
        var streetViewApiUrl = "http://maps.googleapis.com/maps/api/streetview?sensor=false&";

        var formattedImageUrl = string.Format("{0}&size={1}", string.Format("{0}&location={1}", streetViewApiUrl, location), size);
        var httpClient = new HttpClient();

        var imageTask = httpClient.GetAsync(formattedImageUrl);
        HttpResponseMessage response = imageTask.Result;
        response.EnsureSuccessStatusCode();
        await response.Content.LoadIntoBufferAsync();

        return await response.Content.ReadAsByteArrayAsync();

    }
    catch
    {
        return null;
    }
}


public async Task<byte[]> GetStaticMap(
string location, string size)
{

    if (string.IsNullOrEmpty(location))
    {
        return null;
    }

    try
    {
        var stasticMapApiUrl =   "http://maps.googleapis.com/maps/api/staticmap?&markers=color:navy%7Clabel:R%7C62.107733," + location + "&zoom=12&maptype=hybrid&sensor=false";

        var formattedImageUrl = string.Format("{0}&size={1}", string.Format("{0}&center={1}", stasticMapApiUrl, location), size);
        var httpClient = new HttpClient();

        var imageTask = httpClient.GetAsync(formattedImageUrl);
        HttpResponseMessage response = imageTask.Result;
        response.EnsureSuccessStatusCode();
        await response.Content.LoadIntoBufferAsync();

        return await response.Content.ReadAsByteArrayAsync();

    }
    catch
    {
        return null;
    }
}

What does it all look like?

Configuring the API Calls

To get the most out of your images take a look at Google's Documentation on setting up the URL parameters used in the code above.

As always please feel free to subscribe. I will be posting code snippets while building Realintory and maybe some of that is useful to someone out there.

Spread the word