title: How to show google map in MVC?
body: <p>I want to show Google map on my website and my codes are below but after my page loaded in browser i got this error:</p>
  
  <pre><code>Oops! Something went wrong.
  This page didn't load Google Maps correctly. See the JavaScript console for  
  technical details.
  </code></pre>
  
  <p>I looked at it in Chrome and found this:</p>
  
  <pre><code>Google Maps API error: MissingKeyMapError 
  https://developers.google.com/maps/documentation/javascript/error-
  messages#missing-key-map-error
  </code></pre>
  
  <p>what is MissingKeyMap?</p>
  
  <p>my codes:</p>
  
  <p>in header tag:</p>
  
  <pre><code>@Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  &lt;link href="~/Content/Site.css" rel="stylesheet" /&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?
   sensor=false"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      function initialize() {
  
          var canvas = $("#map_canvas");
  
          var latitude = 35.78334;
          var longitude = 51.42511;
  
          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 () {
          initialize();
      });
  
    &lt;/script&gt;
  </code></pre>
  
  <p>On my view :</p>
  
  <pre><code>&lt;div style="width: 100%; height: 100%"&gt;
      &lt;div id="map_canvas" style="width:100%; height:100%; margin-left:   100px"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>