Why my razor page not show google map? - asp.net-mvc

Question

I'm beginner in asp.net mvc ,i read down tutorial for write simple map web application:
this tutorial
So in my view page write this code:
#section Scripts {
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
}
<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:400px; height:300px"></div>
<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_canvas"), options);
}
$(function () {
initialize();
});
</script>
but when i run the my project i cant see anything or map,what happen?how can i solve that problem?thanks.
i open firefox browser console and get this message:
The connection to ws://localhost:48472/fbc4eb4ba8f245c08d4b7830ea1bab80/browserLinkSignalR/connect?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAVMxSNM8YWkSjTNqVKDW%2FRgAAAAACAAAAAAAQZgAAAAEAACAAAABdm%2BiuJnxhF10BzDr1Z%2B7J6KR%2F%2BuJCWYOVuUONt67r8gAAAAAOgAAAAAIAACAAAACcPWAkFxp3Ue2b%2Fu4pg3M7Y3PvHkDLNZfT2ohQfLpWcDAAAAAeHVeKECzTOS87AKunnn2HMxQVjyac86hh6M%2FTjYF4YXxInAmM5wmBizj7UnQW32JAAAAAPgk7BG3rmPAhFQeTmLPjNLjB2Ow%2FbyNdPE5HyR4%2BRmJG3IdLX2om1zux8pxGME9jhfhw3C3AP0e1r5y1JrLtAw%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A31095%2FGoogleMap%2FGoogleMap&browserName=Firefox&userAgent=Mozilla%2F5.0+(Windows+NT+10.0%3B+WOW64%3B+rv%3A43.0)+Gecko%2F20100101+Firefox%2F43.0&tid=6 was interrupted while the page was loading. browserLink:62:20265
ReferenceError: $ is not defined
GoogleMap:33:5
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

Answer 1

You don't need jquery for run initialize you simply can add
google.maps.event.addDomListener(window, 'load', initialize);
.
this way
<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_canvas"), options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
try using
#section Scripts {
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?"></script>
}

Answer 2

You need to use either Jquery
or simply call the method at bottom so the whole code should be like
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_canvas"), options);
}
initialize();
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h2>Hello</h2>
<div id="map_canvas" style="width:400px; height:300px"></div>
initialize();
and it should work.