google is not defined in mvc4 - google-maps

Question

I am trying to render google geochart inside partial view in mvc4 but it's showing reference error:
"google is not defined"
but in simple view it's rendering fine.below is step to render my geochat.i don't know what i am doing wrong or should fellow other step to render google geochat.
my partial view(_mymap.cshtml)
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<div id='visualization'></div>
<script type='text/javascript'>
function initialize() {
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawVisualization);
}
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'tooltip' }); var ivalue = new Array();
data.addRows([[{ v: '002', f: 'Africa' }, 0, 'Click to Choose']]);
ivalue['002'] = 'http://en.wikipedia.org/wiki/Africa';
data.addRows([[{ v: '150', f: 'Europe' }, 1, 'Click to Choose']]);
ivalue['150'] = 'http://en.wikipedia.org/wiki/Europe';
data.addRows([[{ v: '019', f: 'Americas' }, 2, 'Click to Choose']]);
ivalue['019'] = 'http://en.wikipedia.org/wiki/Americas';
data.addRows([[{ v: '142', f: 'Asia' }, 3, 'Click to Choose']]);
ivalue['142'] = 'http://en.wikipedia.org/wiki/Asia';
data.addRows([[{ v: '009', f: 'Australia' }, 4, 'Click to Choose']]);
ivalue['009'] = 'http://en.wikipedia.org/wiki/Oceania';
var options = {
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
colorAxis: { minValue: 0, maxValue: 4, colors: ['#A8A8A8', '#939473', '#B1B38B', '#90AD89', '#87AAAD', ] },
legend: 'none',
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'continents',
sizeAxis: { minValue: 1, maxValue: 1, minSize: 10, maxSize: 10 },
region: 'world',
keepAspectRatio: true,
width: 600,
height: 400,
tooltip: { textStyle: { color: '#444444' }, trigger: 'focus' }
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
//append_to_list(data.getValue(selection[0].row, 0));
});
chart.draw(data, options);
}
$(document).ready(function () {initialize();});
</script>

Answer 1

drawVisualization function is missing closing brace inside script tag. You have closed it after the end script tag in your code.
$(document).ready(function () {initialize();});
</script>
} //this brace need to be inside script tag

Answer 2

The loader uses document.write to inject JS and CSS, this can't be done after the document has finished loading(what is the case here, because you call initialize on domready)
define the callback in the call of google.load and not via setOnLoadCallback
function initialize() {
google.load('visualization',
'1',
{ 'packages': ['geochart'] , callback: drawVisualization});
}