a developer's notes – a semi-technical web development BLOG

September 13, 2013

Google Maps API V3 with ASP.NET MVC 4 Example

Filed under: ASP.NET MVC,C# — Duy Nguyen @ 1:06 pm
Tags: , , , , , , , , , , , ,

Here is the most basic example to get you started with Google Maps API V3. Create a basic template MVC 4 project and create a Home controller with this method:

    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }

Create a new view called Index.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@section Scripts {
    <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
}

@section Styles { @*Styles needed for Google Maps to appear*@
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
}

<h2>Hello, Google Maps</h2>

<div style="width: 100%; height: 100%">
    <div id="map_canvas" style="width:100%; height:100%; margin-left: 100px"></div>
</div>

<script type="text/javascript">

    function initialize() {

        var canvas = $("#map_canvas");

        var latitude = 30.3296604;
        var longitude = -97.8743174;

        var latlng = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(canvas[0], options);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map
        });
    }

    $(function () { //Same as $(document).ready()
        initialize();
    });
       
</script>

Now run the application and you should see the map.

googleMapsExample

Advertisements

8 Comments »

  1. Thanks but this isn’t working for me. I’m using express 2013 for web. Tried both using shared and creating home directories and get this error:
    The following sections have been defined but have not been rendered for the layout page “~/Views/Shared/_Layout.cshtml”: “Styles”.
    Just learning MVC so while this may be simple/obvious I don’t see the problem. Looks like you’re using different HTML/CSS?

    Comment by Gary — January 24, 2014 @ 1:51 pm | Reply

    • You don’t need to create a shared controller. I think you’re missing a “styles” section in your _Layout.cshtml. Here is my file:

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width" />
          <title>@ViewBag.Title</title>
          @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
          
          @*This was moved from the body to the <head> so that you can use the document.ready() without any error*@
          @Scripts.Render("~/bundles/jquery")
      
      
          <style type="text/css">
              @RenderSection("Styles", false)
          </style>
          
      
      </head>
      <body>
          @RenderBody()
          @RenderSection("scripts", required: false)
      </body>
      </html>
      
      

      Comment by adevelopersnotes — January 24, 2014 @ 2:42 pm | Reply

  2. Hi also using web express 2013 and it didn’t work for me can’t see the map and no error message shown

    Comment by george — June 19, 2014 @ 6:04 pm | Reply

  3. George try setting the canvas size using pixels instead of percentages.

    Comment by Derek Crosson — August 29, 2014 @ 7:56 am | Reply

  4. This also didn’t work for me either

    Comment by Fred — May 17, 2015 @ 12:42 pm | Reply

  5. U hv written over here id=map_canvas.. where does it come from?

    Comment by Anonymous — October 20, 2015 @ 7:20 am | Reply

  6. This is the code sample of integration of Google maps with MVC application :
    https://code.msdn.microsoft.com/Google-Map-in-MVC5-21e19073
    I wish it can help you :)

    Comment by chourouk20 — January 2, 2016 @ 7:22 am | Reply

  7. it’s not working

    Comment by hashcode — February 8, 2017 @ 12:27 am | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: