Add a Wordpress shortcode to simply generate custom google maps without a plugin

custom-gmap-shortcode.php

<?php
/**
 * Google Map Shortcode
 * An optional separate file with custom styles can be loaded
 * to declade the $gmapStyle variable contains the JSON as string
 * change the path to match your config
 *
 * API KEY:
 * You need to set your Google Maps API_KEY to the following constant
 *
 * Usage: [cgmap lat="44.6000" lng="-110.5000" zoom="10" height="300px"]
 *
 * With info window:
 * [cgmap lat="44.6000" lng="-110.5000" zoom="10" height="300px"]<strong>My Company</strong>[/cgmap]
 *
 * PHP file content exemple:
 * <?php
 *  $gmapStyle = '[
 *      {
 *          "featureType": "landscape.man_made",
 *          "elementType": "geometry.fill",
 *          ...
 */

define('CGMAP_API_KEY', '');

function custom_gmap( $args, $content = "" ) {
	$args = shortcode_atts( [
		'lat' => '44.6000',
		'lng' => '-110.5000',
		'zoom' => '16',
		'height' => '400px',
	],
		$args,
		'cgmap' );
	
	// Adapt your path if needed
	$gmapStylePath = plugin_dir_path( dirname( __FILE__ ) ) . 'inc/gmap-styles.php';
	if ( file_exists( $gmapStylePath ) ) {
		require_once $gmapStylePath;
	}
	
	$id = substr( sha1( "Google Map" . time() ), rand( 2, 10 ), rand( 5, 8 ) );
	ob_start();
	?>
	<div class='map' style='height:<?= $args['height'] ?>; margin-bottom: 1.6842em' id='map-<?= $id ?>'></div>
	
	<script type='text/javascript'>
		var map;
		
		function initMap() {
			
			<?php if (! empty( $gmapStyle )) :?>
			var styledMapType = new google.maps.StyledMapType(<?= $gmapStyle ?>, {name: 'Styled Map'});
			<?php endif; ?>
			
			var place = {lat: <?= $args['lat'] ?>, lng: <?= $args['lng'] ?>};
			map = new google.maps.Map(document.getElementById('map-<?= $id ?>'), {
				center: place,
				zoom: <?= $args['zoom'] ?>,
				zoomControl: true,
				mapTypeControl: false,
				scaleControl: true,
				streetViewControl: false,
				rotateControl: false,
				fullscreenControl: true
			});
			
			var marker = new google.maps.Marker({
				position: place,
				map: map,
				animation: google.maps.Animation.DROP
			});
			
			<?php if (! empty( $content )) :?>
			var infowindow = new google.maps.InfoWindow({
				content: '<?= $content; ?>'
			});
			map.addListener('tilesloaded', function() {
				infowindow.open(map, marker);
			});
			<?php endif; ?>
			
			<?php if (! empty( $gmapStyle )) :?>
			map.mapTypes.set('styled_map', styledMapType);
			map.setMapTypeId('styled_map');
			<?php endif; ?>
		}
	</script>
	
	<?php
	$output = ob_get_clean();
	
	return $output;
}

add_shortcode( 'cgmap', 'custom_gmap' );

/**
 * Enqueue Google Maps API
 */
function custom_gmap_enqueue_assets() {
	wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=' . CGMAP_API_KEY . '&callback=initMap', [], '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'custom_gmap_enqueue_assets' );