Google API Does not appear on my page

Question

Hello, I’m trying to insert the google maps on a website MVC that the Visual Studio 2012 already available for testing. Except for the part of maps and putting into a aspx loose, it generates the cute little map the way I need it but when I throw it in a div within the "contact" page or any other MVC it does not appear. Someone can explain to me why or what I have to do for this map to appear on div straight.

<%@ Page Title="Contact" Language="VB" Masterpagefile="~/Site.Master"" > Autoeventwireup="true" Codefile="Contact.aspx.Vb" Inherits="Contact" %>

<hgroup class="title">
    <h1>Telefones</h1>

</hgroup>

<section class="contact">
    <header>
        <h3>Contatos:</h3>
    </header>
    <p>
        <span class="label">Principal:</span>
        <span>[phone]</span>
    </p>
    <p>
        <span class="label">Horário de plantão:</span>
        <span>[phone]</span>
    </p>
</section>

<section class="contact">
    <header>
        <h3>Email:</h3>
    </header>
    <p>
        <span class="label">Suporte:</span>
        <span><a href="[email protected]">[email protected]</a></span>
    </p>
    <p>
        <span class="label">Comercial:</span><br />
        <span><a>Aleandro - [email protected]</a></span><br />
        <span><a>Robert - [email protected]</a></span><br />
        <span><a>Christiano Cassio - [email protected]</a></span><br />
    </p>
    <p>
        <span class="label">Gerentes:</span>
        <span><a>Leandro - [email protected]</a></span>
        <span><a>Frederico - [email protected]</a></span>
    </p>
</section>

<section class="contact">
    <header>
        <h3>Endereço</h3>
    </header>
    <p>
        R. Álvares de Azevedo, 103 - Colégio Batista, Belo Horizonte - MG, 31110-290
    </p>
</section>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  .wrap { max-width: 75em; min-height: 40em; height:100%; width:100%; margin: 0 auto; padding-top: 2.5%;}
  #map-canvas { height: 40%;
    width: 30%;
    margin-left: 200px;
    padding-left: 200px; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxr6e8Ki1o0TdrP4YLE_DwoiZfKkI-4dQ&callback=initMap">
</script>
<script type="text/javascript">
    var map;
    var centerPos = new google.maps.LatLng(-19.9084715, -43.9395248);
    var zoomLevel = 17;
    function initialize() {
        var mapOptions = {
            center: centerPos,
            zoom: zoomLevel
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var locations = [['Informinas', -19.9084715, -43.9395248]];


        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                title: locations[i][0],
                map: map

            });
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

the element defined here as map-canvas

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

is not defined anywhere in your view. Also, it does not seem that the initialize method is being called anywhere.

If it’s no problem, put the whole content of the method initialize within

$(document).ready(function(){});

because this way it will run whenever the view finishes loading ;)