v5 Google Maps Settings in v6

Any easy was to migrate gMap settings (footer code) from v5 to v6 without changing to "inline"? For reference, what I mean by "inline" is shown per documentation and not preferred:

<div class="gmap" style="height: 250px;" data-address="Melbourne, Australia" data-zoom="12" data-markers='[{address: "Melbourne, Australia",html: "Melbourne, Australia"}]' data-icon='{image: "one-page/images/icons/map-icon-red.png",iconsize: [32, 32],iconanchor: [14,44]}'></div>

The following is what I previously had and although I think it is able to migrate inline to one line of code, it will be rather complex to tweak in future:

<div id="google-map" style="height: 300px; margin-bottom: 20px;" class="gmap"></div>

JS in HTML Footer:

<script>

	$('#google-map').gMap({
		 address: '37.296, -76.644',
		 maptype: 'ROADMAP',
		 zoom: 11,
		 markers: [
			{
				address: "37.296, -76.644",
				icon: {
					image: "images/icons/map-icon-red-dubs.png",
					iconsize: [26, 40],
					iconanchor: [13, 40]
				},
				html: "<strong>New Quarter Park</strong>
1000 Lakeshead Dr, Williamsburg, VA 23185"
			},
			{
				address: "37.315, -76.703",
				icon: {
					image: "images/icons/map-icon-red-dubs.png",
					iconsize: [26, 40],
					iconanchor: [13, 40]
				},					html: "<strong>Waller Mill Park</strong>
901 Airport Rd, Williamsburg, VA 23185"
			}
		 ],
		 doubleclickzoom: true,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: false,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		},
		styles:
			[
				{
					"featureType": "administrative",
					"elementType": "labels.text.fill",
					"stylers": [
						{
							"color": "#444444"
						}
					]
				},
				{
					"featureType": "landscape",
					"elementType": "all",
					"stylers": [
						{
							"color": "#f2f2f2"
						}
					]
				},
				{
					"featureType": "poi",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "road",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -20
						},
						{
							"lightness": 35
						}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "all",
					"stylers": [
						{
						}
					]
				},
				{
					"featureType": "road.arterial",
					"elementType": "labels.icon",
					"stylers": [
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "all",
					"stylers": [
						{
							"color": "#6699cc"
						},
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "labels.text",
					"stylers": [
						{
							"visibility": "on"
						},
						{
							"color": "#333333"
						}
					]
				},    
				{
					"featureType": "poi.park",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "on"
						}
					]
				}
			]
	});

</script>

I have tried this and note my code (next line) did not execute Custom JS Codes at the bottom of the Page like v5:
<div id="google-map" style="height: 300px; margin-bottom: 20px;" class="gmap customjs"></div>

I have tried a few other things debugging issue and note that I can get Custom JS Codes to work in the following two scenarios (obviously not the long-term solution):

#1: with or without .customjs applied to div, using same Custom JS Codes, and adding the following code under functions.js:

<script src="js/functions.js"></script>
<script src="https://maps.google.com/maps/api/js?key=MYAPICODEISREMOVEDFORTHISPOST"></script>
<script src="js/plugins.gmap.js"></script>

#2: with or without .customjs applied to div, NOT using Custom JS Codes in HTML file, but completely transferred Custom JS Codes to plugins.gmap.js REPLACING these custom code lines starting with this and below (code above this in plugins.gmap.js left as-is):

var SEMICOLON = SEMICOLON || {};

SEMICOLON._gmapInit = function( $gmapEl ){

	$gmapEl = $gmapEl.filter(':not(.customjs)');
.
.
.
.
.
	});

};

Note with this method, it requires I include the following code (API declaration) under functions.js ONLY if .customjs is applied to the div:

<script src="js/functions.js"></script>
<script src="https://maps.google.com/maps/api/js?key=MYAPICODEISREMOVEDFORTHISPOST"></script>

My guess from all this is when using .customjs applied to the div, it bypasses the API declaration in its new location (functions.js) and somehow maybe the custom code in plugins.gmap.js when using :not(.customjs) is not working as intended and breaking plugins.gmap.js when executing?

Any other ideas?

Thank you, that fixed the issue!!