Why am I not able to pass latitude and longtitude to a JavaScript file?
Question
I'm passing a model from the database with a lat and long variable to the view which then passes it to the javascript file. But whenever I run the website I'm getting the error that Lat and Lng aren't defined. They're inexistent somehow. While I can access them from the view and the values are definitely correct I checked it it's really being passed to the view. Why am I not able to pass the variables from the view to the JS file correctly?
function initMap() {
var uluru = { lat: Lat, lng: Lng };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Google.Models
{
public class Marker
{
public int MarkerID { get; set; }
public string Adres { get; set; }
public float Lat { get; set; }
public float Lng { get; set; }
}
}
@model Google.Models.Marker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="~/js/googleMap.js"></script>
<script>
var Lat = @Model.Lat
var Lng = @Model.Lng
</script>
</head>
<body>
<h1>@Lat</h1>
<div class="container">
<center><h1>Responsive Google Map</h1></center>
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 top-buffer">
<div id="map"></div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 top-buffer"></div><h1>Contact Informatie</h1></div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUxVA8CRavXv6yP5M4rIuSK9xJt8kgPwg&callback=initMap"></script>
</body>
</html>
1 answers
solution1
0 2017-12-13 23:32:09
Heavily edited my answer based on new information you've provided. Is the #map div visible? It needs a height and width.
I don't think the Google Maps reference will work in the below Stack Overflow snippet, but this code is working in a local environment.
function initMap() { var uluru = { lat: Lat, lng: Lng }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); console.log(Lat); console.log(Lng); }
<html> <script> var Lat = 43.5765631; var Lng = -116.274815; </script> <body> <div id="map" style="height: 100%; width: 100%;"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUxVA8CRavXv6yP5M4rIuSK9xJt8kgPwg&callback=initMap"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.