locked
How to reference Google Map tag in a Javascript file RRS feed

  • Question

  • User1242168447 posted

    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')
    
    }
    Monday, November 11, 2019 4:13 PM

Answers

  • User-719153870 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 12, 2019 3:18 AM