CODEWITHSUNDEEP
javascripthtmlasp.net-mvc
Faradey Inimicos
Faradey Inimicos

Reputation: 777

Google maps does not display in MVC project

Hello i try to add google map to my project but when u render page it looks like this. enter image description here

Code of showed above,page looks like this.

 @using OnlineShop.Models;
    @{
        Layout = "~/Views/Shared/_MainPageLayout.cshtml";
    }
    <html>
    <head>
        <link type="text/css" rel="stylesheet" href="~/Content/MainPage.css?Wednesday 20th of July 2016 07:45:21 AM" />
        <script src="~/Scripts/jquery-3.1.0.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
        <script src="http://maps.google.com/maps/api/js?key=MyKey" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width" />
        <title>Contacts</title>
    </head>
    <body>
        <div id="showProduct">
            <p>Email:[email protected]</p>
            <p>Phone:555-555-555</p>
            <p>City:Kiev</p>
            <p>Adress:Fiskulturi 6</p>
            <div id="canvas" style="height:500px;width:500px"></div>   
        </div>

    </body>
    </html>
    <script type="text/javascript">
        $(document).ready(function () {
                GetMap();
            })
            function GetMap() {
                var Kiev = google.maps.LatLng(50.4126106, 30.5444569);
                var mapOptions = {
                    zoom: 15,
                    center: Kiev,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
            }
    </script>

I tried to find solution in internet but there are advices to render div first ,then add map to it.But is seems that i did it.

Upvotes: 0

Views: 418

Answers (1)

Turnip
Turnip

Reputation: 36742

You are missing the new keyword when you assign a value to Kiev:

var Kiev = new google.maps.LatLng(50.4126106, 30.5444569);
            ^

On a side note; you are loading both jquery.js and jquery.min.js. You should only ever load one version. Same for jquery.unobtrusive-ajax.js

Upvotes: 1

Related Questions