Return to Answer

(function ($, MVCArray, HeatmapLayer, LatLng) {
    'use strict';

    function getHeatmapData(url, propertyName) {
        $.getJSON(url,
            function (data) {
                var marker = [];

                $.each(data,
                    function (i, item) {
                        marker.push({
                            'location': new LatLng(item.Latitude2, item.Longitude2),
                            'map': map,
                            'weight': item[propertyName],
                            'radius': 10
                        });
                    });
                var pointArray = new MVCArray(marker);

                heatmap = new HeatmapLayer({
                    data: pointArray
                });
                heatmap.setMap(map);
            });
    }


    this.getStops = function () {
        var url = $('#map').data('heatmap-stops-url');

        getHeatmapData(url, "Stops");
    }

    this.getDriving = function () {
        var url = $('#map').data('heatmap-driving');

        getHeatmapData(url, "Speed");
    }

})(this.jQuery, this.google.maps.MVCArray, this.google.maps.visualization.HeatmapLayer, this.google.maps.LatLng);

Just plain getting crazy

You could utilize a function closure and import only the symbols you need, throw in a 'use strict'; directive.

This will:

1. Give you bragging rights because you used 'use strict';. There are other benefits, but from the standpoint of your script it basically does nothing. Bragging right. That's it.

2. Remove the need for fully qualified class names like google.map.x.Foo.

3. Allow your code to function even if some other JavaScript library defines a $ function

But at this point, we're really just being crazy.

It's good to use data-* attributes for this kind of thing. I would highly recommend avoiding generic names like data-request-url in favor of something more explicit. You are generating two different heat maps:

1. Stops
2. Driving

This feels like two explicitly named attributes would be better:

<div id="map"
     data-heatmap-stops-url="@Url.Action(...)"
     data-heatmap-driving-url="@Url.Action(...)">
</div>

Now looking at your HTML source code will give you a better idea about what these custom attributes mean.

It's good to use data-* attributes for this kind of thing. I would highly recommend avoiding generic names like data-request-url in favor of something more explicit. You are generating two different heat maps:

1. Stops
2. Driving

This feels like two explicitly named attributes would be better:

<div id="map"
     data-heatmap-stops-url="@Url.Action(...)"
     data-heatmap-driving-url="@Url.Action(...)">
</div>

Now looking at your HTML source code will give you a better idea about what these custom attributes mean.

Cleaning up repetitive code

The code to get the map points between the stops and driving points is very similar. In fact, there are only two differences:

1. The URL
2. The property within the response used to render the heat map

Consider pulling this out into its own method, and parameterizing it:

function getHeatmapData(url, propertyName) {
    $.getJSON(url,
        function (data) {
            var marker = [];

            $.each(data,
                function (i, item) {
                    marker.push({
                        'location': new google.maps.LatLng(item.Latitude2, item.Longitude2),
                        'map': map,
                        'weight': item[propertyName],
                        'radius': 10
                    });
                });
            var pointArray = new google.maps.MVCArray(marker);

            heatmap = new google.maps.visualization.HeatmapLayer({
                data: pointArray
            });
            heatmap.setMap(map);
        });
}

Then the getStops and getDriving methods are much shorter:

function getStops() {
    var url = $('#map').data('heatmap-stops-url');

    getHeatmapData(url, "Stops");
}

function getDriving() {
    var url = $('#map').data('heatmap-driving');

    getHeatmapData(url, "Speed");
}