CODEWITHSUNDEEP
asp.net-mvcgoogle-maps
behzad razzaqi
behzad razzaqi

Reputation: 107

Why my razor page not show google map?

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.

Upvotes: 1

Views: 2266

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133360

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>
}

Upvotes: 2

Abhishek
Abhishek

Reputation: 170

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.

Upvotes: 1

Related Questions