Faradey Inimicos Faradey Inimicos - 2 months ago 4x
Javascript Question

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";
<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" />
<div id="showProduct">
<p>Adress:Fiskulturi 6</p>
<div id="canvas" style="height:500px;width:500px"></div>

<script type="text/javascript">
$(document).ready(function () {
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);

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.


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