CODEWITHSUNDEEP
asp.net-mvc-3google-maps
Tripping
Tripping

Reputation: 919

google maps + asp .net mvc 3 not working

I am teaching myself asp .net mvc 3. I read this tutorial: http://www.codeproject.com/Articles/148949/ASP-NET-MVC-3-the-Razor-View-Engine-and-Google-Map and several other such posts. However, I have not been able to get google map running on my application. what am I doing wrong?

View:

    @section Scripts_head {
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    }

    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(40.716948, -74.003563);
            var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map"), options);
        }

        $(function () {
            initialize();
        });
    </script>
<div id="map" style="width:80%; height:80%"></div>

I have also tried putting the div over the script tag.

Layout Page:

<head>
    ...
    @RenderSection("Scripts_head", false)
</head>

Controller:

public class MapController : Controller
{
    //
    // GET: /Map/

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

}

Upvotes: 1

Views: 1557

Answers (2)

Marcelo
Marcelo

Reputation: 9407

Give you map div an absolute size. You have:

<div id="map" style="width:80%; height:80%"></div>

...but that is 80% of what?

instead try:

<div id="map" style="width:400px; height:300px"></div>

Upvotes: 0

MiBu
MiBu

Reputation: 869

If you dont have errors, then its probably sizing of your div "map". Here is your code extracted and working in JsFiddle: http://jsfiddle.net/GNwU8/3/

Upvotes: 1

Related Questions