I'm working on ASP.Net MVC and we're using an external .JS file to place all javascript code. I firstly placed the below Google Map code in the View and it is working nice displaying the map in the view page... but when I sent my code for code-review, code-review
folks require me to reference it in the .JS file. I tried so many times to put it in a .JS file but I can't have it displayed in a view.
Seems like they want the google map initialization variable and the google map js script inside the js fileairplanDetail.jsand, only have the reference in the view page. They want clean code/view page
Seems like they want the google map initialization variable and the google map js script inside the js fileairplanDetail.jsand, only have the reference in the view page. They want clean code/view page
According to this description, it seems that you want to make Google Map api js offline usement which not available at this moment since your page need to make a request to Google server.
For detailed information, please refer to below demo:
cshtml:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GoogleMapDemo</title>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
@Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
@Scripts.Render("~/Scripts/Map.js")
Map.js:
$(function () {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBLc4ga-dyWVbF5XEj8k1kXxu3ZiEkHhwo&callback=initMap';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
var script1 = document.createElement('script');
script1.type = 'text/javascript';
script1.onload = function () {
initMap();
};
document.getElementsByTagName('head')[0].appendChild(script);
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}
Member
39 Points
63 Posts
How to reference Google Map tag in a Javascript file
Nov 11, 2019 04:13 PM|LetMeCode|LINK
I'm working on ASP.Net MVC and we're using an external .JS file to place all javascript code. I firstly placed the below Google Map code in the View and it is working nice displaying the map in the view page... but when I sent my code for code-review, code-review folks require me to reference it in the .JS file. I tried so many times to put it in a .JS file but I can't have it displayed in a view.
Seems like they want the google map initialization variable and the google map js script inside the js file airplanDetail.js and, only have the reference in the view page. They want clean code/view page
Can you please assist?
So in the ASP.Net MVC view page, at the bottom, there's a the below code that refence to the JS file.
and inside the airplanDetails.js file there's a code looks like the below
Contributor
3140 Points
983 Posts
Re: How to reference Google Map tag in a Javascript file
Nov 12, 2019 03:18 AM|Yang Shen|LINK
Hi LetMeCode,
According to this description, it seems that you want to make Google Map api js offline usement which not available at this moment since your page need to make a request to Google server.
You can see it API feature to download a map for offline use.
Maybe you can try other map apis that can be download to your local and set in js file.
Edit: Seems there's another way can achieve your requirement. You can use register the js file reference in your airplanDetail.js.
For detailed information, please refer to below demo:
cshtml:
<html> <head> <meta name="viewport" content="width=device-width" /> <title>GoogleMapDemo</title> <style type="text/css"> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> </body> </html> @Scripts.Render("~/Scripts/jquery-3.3.1.min.js") @Scripts.Render("~/Scripts/Map.js")
Map.js:
$(function () { var script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBLc4ga-dyWVbF5XEj8k1kXxu3ZiEkHhwo&callback=initMap'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); var script1 = document.createElement('script'); script1.type = 'text/javascript'; script1.onload = function () { initMap(); }; document.getElementsByTagName('head')[0].appendChild(script); }); function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }); }
Best Regard,
Yang Shen