kmllayers

kmllayers.php

<?php
# 1. Install MyListing Child Theme

# 2. Make sure you're editing through FTP, so you can restore the page if anything goes wrong.

# 3. Paste the code below in my-listing-child/functions.php below line 11. 
// Enqueue script.js
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'child-script',
        get_stylesheet_directory_uri() . '/script.js', ['jquery'],
        wp_get_theme()->get('Version')
    );

    wp_localize_script( 'child-script', 'MyListingChild', [
    	'uri' => untrailingslashit( get_stylesheet_directory_uri() ),
    	]);
});

# 4. Create my-listing-child/layers directory.

# 5. Export the Google Maps layer you create using the option "Download KML" and by checking
# the "Export to a .KML file (for full icon support, use .KMZ)." option provided there.

# 6. Save the downloaded file in my-listing-child/layers/file.kml - Rename "file.kml" to your-category.kml,
# since there will be a layer file for each category

# 7. Create my-listing-child/script.js
# 8. Paste this in my-listing-child/script.js ?>
jQuery(document).ready(function($) {

	// EDIT THIS
	// 'Category Name': 'layer-file.kml',
	var layers = {
		'Nightlife': 'nightlife.kml',
		'Cafe & Bar': 'cafe-bar.kml',
		'Photographers': 'http://www.google.com/maps/d/u/0/kml?forcekml=1&mid=1YVAhz_mybG889TlswbyuQRyN2PeXTfU7',
	};
	// DO NOT EDIT BELOW.

	var _layers = {};
	Object.keys(layers).forEach(function(el) {
		_layers[el] = new google.maps.KmlLayer({
			url: layers[el].startsWith('http') ? layers[el] : MyListingChild.uri + '/' + layers[el],
		});
	});

	$('.listing-cat-tab .listing-cat').click(function(e) {
		var ctg = $(this).find('.case27-secondary-text').text().trim();
		var map = CASE27_Maps.get( CASE27_Explore_Listings.$xyz.map.id ).map;

		if ( ! ( map && ctg ) ) { return false; }

		// Remove other layers.
		Object.keys(_layers).forEach(function(el) {
			_layers[el].setMap(null);
		});

		// Show new layer.
		// console.log(ctg, _layers[ctg]);
		if ( typeof _layers[ctg] !== 'undefined' ) {
			_layers[ctg].setMap(map);
		}
	});
});