how to display google api map in mvc5 application

Question

how to display google api map in asp.net mvc5 application  

unable to display google map in view page in mvc5 

 

i am using javascript code:

 

<script type="text/javascript"

src="http://maps.google.com/maps/api/js?sensor=false">

</script>

 

<script type="text/javascript">

$(document).ready(function () {

window.onload = initialize;

});

function initialize() {

var mapOptions = {

zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644),

center: {lat: -34.397, lng: 150.644},

center: {lng: 150.644, lat: -34.397},

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var latlng=new google.maps.LatLng(-34.397, 150.644);

var marker = new google.maps.Marker({

position: latlng,

map: map,

title: 'My Price'

});

}

</script>

<div id="map-canvas" style="width: 100%; height: 100%"></div>