Support » Plugin: Royal Google Maps » WP 3.9 not working tinyMCE button.

  • Hello,
    I have had problem with your plugin not displaying popup on button ( tinymce button ) clicking.
    And as there’s new version of TinyMce in WP core you’ll need to add some extra code.
    here’s it is ( for me it works ):

    ( function() {
        tinymce.PluginManager.add( 'royalgmap', function( editor, url ) {
            // Add a button that opens a window
            editor.addButton( 'royalgmap_button', {
                title : 'Royal Google Maps Shortcode Generator', // title of the button
                text : '',
                image: url + '/gmap.png',
                onclick: function() {
                    // triggers the thickbox
    				var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
    				W = W - 80;
    				H = H - 115;
    				tb_show( 'Google Maps Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=royalgmap-form' );
                }
    
            } );
    
        } );
    
        // executes this when the DOM is ready
    	jQuery(function(){
    		// creates a form to be displayed everytime the button is clicked
    		// you should achieve this using AJAX instead of direct html code like this
    		var form = jQuery('<div id="royalgmap-form"><table id="royalgmap-table" class="form-table">\
    			<tr>\
    				<th><label for="royalgmap-id">Map ID</label></th>\
    				<td><input type="text" name="id" id="royalgmap-id" value="map1" /><small>Give an Unique ID for Every Map</small>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-w">Map Width</label></th>\
    				<td><input type="text" name="w" id="royalgmap-w" value="100%" /><small>Width in pixels or percentages</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-h">Map Height</label></th>\
    				<td><input type="text" name="h" id="royalgmap-h" value="400" /><small>Height in pixels</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-lat">Latitude</label></th>\
    				<td><input type="text" id="royalgmap-lat" name="lat" value="23" /><small>Just give Latitude value</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-lon">Longitude</label></th>\
    				<td><input type="text" id="royalgmap-lon" name="lon" value="90" /><small>Just give Longitude value</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-zoom">Zoom</label></th>\
    				<td><select name="zoom" id="royalgmap-zoom">\
    					<option value="1">1</option>\
    					<option value="2">2</option>\
    					<option value="3">3</option>\
    					<option value="4">4</option>\
    					<option value="5">5</option>\
    					<option value="6">6</option>\
    					<option value="7">7</option>\
    					<option value="8">8</option>\
    					<option value="9">9</option>\
    					<option value="10" selected>10</option>\
    					<option value="11">11</option>\
    					<option value="12">12</option>\
    					<option value="13">13</option>\
    					<option value="14">14</option>\
    					<option value="15">15</option>\
    					<option value="16">16</option>\
    					<option value="17">17</option>\
    					<option value="18">18</option>\
    					<option value="19">19</option>\
    					<option value="20">20</option>\
    				</select><small>Google Map Zoom</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-zc">Zoom Control</label></th>\
    				<td><select name="zc" id="royalgmap-zc">\
    					<option value="true" selected>True</option>\
    					<option value="false">False</option>\
    				</select><small>Zoom Control</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-zco">Zoom Size</label></th>\
    				<td><select name="zco" id="royalgmap-zco">\
    					<option value="SMALL" selected>SMALL</option>\
    					<option value="LARGE">LARGE</option>\
    				</select><small>Zoom Size</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-maptype">Map Type</label></th>\
    				<td><select name="maptype" id="royalgmap-maptype">\
    					<option value="ROADMAP" selected>ROADMAP</option>\
    					<option value="SATELLITE">SATELLITE</option>\
    					<option value="HYBRID">HYBRID</option>\
    					<option value="TERRAIN">TERRAIN</option>\
    				</select><small>Map Type</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-marker">Marker</label></th>\
    				<td><select name="marker" id="royalgmap-marker">\
    					<option value="yes" selected>Yes</option>\
    					<option value="no">No</option>\
    				</select><small>Marker</small></td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-markerimage">Marker Image</label></th>\
    				<td><input type="text" id="royalgmap-markerimage" name="markerimage" value="" /><small>Full image URL</small>\
    				</td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-infowindow">Info Window</label></th>\
    				<td><input type="text" id="royalgmap-infowindow" name="infowindow" value="Mehdi Akram" /><small>Info descriptions</small>\
    				</td>\
    			</tr>\
    			<tr>\
    				<th><label for="royalgmap-infowindowdefault">Info Window Default</label></th>\
    				<td><select name="infowindowdefault" id="royalgmap-infowindowdefault">\
    					<option value="no" selected>No</option>\
    					<option value="yes">Yes</option>\
    				</td>\
    			</tr>\
    		</table>\
    		<p class="submit">\
    			<input type="button" id="royalgmap-submit" class="button-primary" value="Insert Goole Map" name="submit" />\
    		</p>\
    		</div>');
    
    		var table = form.find('table');
    		form.appendTo('body').hide();
    
    		// handles the click event of the submit button
    		form.find('#royalgmap-submit').on('click', function(){
    			// defines the options and their default values
    			// again, this is not the most elegant way to do this
    			// but well, this gets the job done nonetheless
    			var options = {
    				'lat'    		: '23',
    				'lon'    		: '90',
    				'id'  			: 'map1',
    				'w'    			: '100%',
    				'h' 			: '400',
    				'zoom'			: '10',
    				'zc'			: 'true',
    				'zco'    		: 'SMALL',
    				'maptype'   	: 'TERRAIN',
    				'marker'		: 'yes',
    				'markerimage'	: '',
    				'infowindow'	: '',
    				'infowindowdefault'	: 'no'
    				};
    			var shortcode = '[royalmap';
    
    			for( var index in options) {
    				var value = table.find('#royalgmap-' + index).val();
    
    				// attaches the attribute to the shortcode only if it's different from the default value
    				if ( value !== options[index] )
    					shortcode += ' ' + index + '="' + value + '"';
    			}
    
    			shortcode += ']';
    
    			// inserts the shortcode into the active editor
    			tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
    
    			// closes Thickbox
    			tb_remove();
    		});
    	});
    
    } )();

    Everyone else can copy these code ( until plugin is updated ) and paste it to js file in plugins folder.
    Hope that helps someone )

    https://wordpress.org/plugins/royal-google-maps/

  • The topic ‘WP 3.9 not working tinyMCE button.’ is closed to new replies.