How to reference Google Map tag in a Javascript file[Answered] RSS

1 reply

Last post Nov 12, 2019 03:18 AM by Yang Shen

‹ Previous Thread|Next Thread ›

Shortcuts

LetMeCode

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?

                            <div class="googleMapAPI">
                            @{
                                var googleAPIKey = ConfigurationSettings.AppSettings["CWU_GoogleAPI_Key"];
                                <script src="https://maps.googleapis.com/maps/api/js?key=@googleAPIKey&callback=initMap" type="text/javascript"></script>
                            }

So in the ASP.Net MVC view page, at the bottom, there's a the below code that refence to the JS file.

@section Scripts {    
    @Scripts.Render("~/Scripts/Views/Product/airplanDetail.js")
}

and inside the airplanDetails.js file there's a code looks like the below

$(function () {    

    Initialize();        
});

function Initialize() {

google.maps.visualRefresh = true;

var propertyLatitude = document.getElementById("latitudId").value;
var propertyLongitude = document.getElementById("longitudId").value;
var propertyLocation = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var mapOptions = {
    zoom: 14,
    center: propertyLocation,
    mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatlng = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Location found'
});


marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

}

Yang Shen

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,

LetMeCode
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

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

‹ Previous Thread|Next Thread ›