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: <!-- language: lang-html --> <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: <!-- language: lang-js --> 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: <!-- language: lang-js --> function getStops() { var url = $('#map').data('heatmap-stops-url'); getHeatmapData(url, "Stops"); } function getDriving() { var url = $('#map').data('heatmap-driving'); getHeatmapData(url, "Speed"); }