Google地图未在剃须刀中呈现

Question

I've removed float left from the mapCanvas css as suggested by Nava:

#mapCanvas {
    width: 500px;
    height: 400px;
    /*float: left;*/
}

I've also removed second reference to jQuery at the end of the view...

 #mapCanvas { width: 500px; height: 400px; float: left; } #infoPanel { float: left; margin-left: 10px; } #infoPanel div { margin-bottom: 5px; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> @model PetBookMVC2.Models.LostAndFound @{ ViewBag.Title = "Registrar Mascota Extraviada"; } <h2>@ViewBag.Title</h2> <div class="alert alert-info" hidden="hidden">@ViewBag.Message</div> @using (Html.BeginForm("Create", "LostAndFounds", null, FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken() <div class="form-horizontal col-md-6"> <h4>Ingrese los datos de su mascotita extraviada...</h4> <hr />@Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.IdPet) @Html.HiddenFor(model => model.IdUser) <div class="form-group"> @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control", @placeholder = "Ingrese una Título" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Título de su anuncio de Mascota Extraviada", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.DateLost, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.TextBoxFor(model => model.DateLost, new { @class = "form-control datepicker", placeholder = "Ingrese fecha de extravio..." }) @*@Html.ValidationMessageFor(model => model.DateLost, "", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Latitude, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Latitude, new { htmlAttributes = new { @class = "form-control", @id = "latbox" } }) @*@Html.ValidationMessageFor(model => model.Latitude, "Debe ingresar la Latitud", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Longitude, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Longitude, new { htmlAttributes = new { @class = "form-control", @id = "lngbox" } }) @*@Html.ValidationMessageFor(model => model.Longitude, "Debe ingresar la Longitud", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Contact1, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Contact1, new { htmlAttributes = new { @class = "form-control", @placeholder = "Teléfono de Contacto" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Ingrese un teléfono de contacto", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Contact2, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Contact2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Teléfono de Contacto" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Ingrese un teléfono de contacto", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control", @placeholder = "Ingrese una referencia" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Debe ingresar una referencia", new { @class = "text-danger" })*@ </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Grabar" class="btn btn-default" /> </div> </div> @Html.ActionLink("Regresar al Listado", "Index") </div> } <div class="row"> <div id="mapCanvas"></div> <div id="infoPanel"> <b>Estado del Marcador</b> <div id="markerStatus"><i>Haga Click y arrastre el marcador</i> </div> <b>Posicion actual</b> <div id="info"></div> <div id="lat"></div> <div id="lng"></div> <b>Dirección más cercana</b> <div id="address"></div> </div> </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> $(function() { // will trigger when the document is ready $('.datepicker').datepicker({ format: 'dd/mm/yyyy' }); //Initialise any date pickers initialize(); }); var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('No se puede determinar la dirección de esta ubicación'); } }); } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); document.getElementById('lat').innerHTML = latLng.lat(); document.getElementById('lng').innerHTML = latLng.lng(); //document.getElementById('latbox').innerHTML = latLng.lat(); //document.getElementById('lngbox').innerHTML = latLng.lng(); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function initialize() { var latLng = new google.maps.LatLng(-12.0711893, -77.0698524); var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 17, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; latLng = pos; map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { handleLocationError(false, infoWindow, map.getCenter()); // Browser doesn't support Geolocation } var marker = new google.maps.Marker({ position: latLng, title: 'Por acá se perdió mi mascotita', map: map, draggable: true }); // Update current position info. updateMarkerPosition(latLng); geocodePosition(latLng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress('Arrastrando...'); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus('Arrastrando...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Arrastre finalizado'); geocodePosition(marker.getPosition()); }); } // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); </script> } 

HI, I've been trying to make this code work in my Mvc web but I can't find the reason why is not rendering. I have exact the same code in a new project and it works fine, but not in mine.

Here's my code... the only difference I found with the project that works is the JavaScript version 1.10.2 versus 2.2.1 which I actually use. Even in this snippet the code works fine... I'm loosing my mind!

Answer 1

You included the url to your site and I took a look. Seems you are getting a Javascript error when you try to create google.maps.Map .

This is where I would begin my investigation.

On a side note, you are including jQuery twice, but /Scripts/jquery-1.10.2.min.js is returning a 404.