• Evening All,

    I’m hoping somebody may be able to help me – whilst I’m quite confident playing with WP, I’ve next to no idea when it comes to script/js – and I think this is some kind of javascript error?

    https://www.thetoybarrow.com/contact-us/

    On this page as you can see the Google Map isn’t showing, and when I look at the console in Chrome it’s showing the following –

    Uncaught ReferenceError: google is not defined?f=wp-content/plugins/responsive-lightbox/assets/swipebox/js/jquery.swipebox.min.js,wp-content/plug…:26Uncaught ReferenceError: google is not defined(anonymous function) @ ?f=wp-content/plugins/responsive-lightbox/assets/swipebox/js/jquery.swipebox.min.js,wp-content/plug…:26(anonymous function) @ ?f=wp-content/plugins/responsive-lightbox/assets/swipebox/js/jquery.swipebox.min.js,wp-content/plug…:26
    (index):518 Uncaught TypeError: jQuery(...).initMap is not a function

    Can anybody help with this please?

    Thanks ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter ttb

    (@ttb)

    Don’t know whether any of this will help at all, however I’ve copied below the google_map.php file and the page-contact.php (which is the template used to create the contact page).

    <div id="googlemap<?php echo esc_attr($map_id); ?>" class="googlemap" style="height:<?php echo (int)$height; ?>px;"></div>
    <div class="clear"></div>
    <?php if ( $enlarge_button ) { ?>
    	<div class="map_buttons">
    		<a href="https://maps.google.com/maps?q=<?php echo htmlspecialchars( urlencode( $address ) ); ?>"
    		   target="_blank" class="icon-zoom-in-outline enlargemap"> <?php echo addcslashes($address,'"');?></a>
    	</div>
    <?php } ?>
    <?php if ( !is_page_template( 'page-contact.php' ) ) {
    if ( $map_id == 1 ) { ?>
    	<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <?php }
    	} ?>
    <script type="text/javascript">
    	(function ($) {
    		var geocoder;
    		var map;
    		var query = "<?php echo addcslashes($address,'"');?>";
    		function initialize() {
    			geocoder = new google.maps.Geocoder();
    			var myOptions = {
    				zoom: <?php echo (int)$zoom;?>,
    				scrollwheel: false,
    				styles: [
    			    {
    			        "featureType": "landscape.man_made",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "color": "#f7f1df"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "landscape.natural",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "color": "#d0e3b4"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "landscape.natural.terrain",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "visibility": "off"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "poi",
    			        "elementType": "labels",
    			        "stylers": [
    			            {
    			                "visibility": "off"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "poi.business",
    			        "elementType": "all",
    			        "stylers": [
    			            {
    			                "visibility": "off"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "poi.medical",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "color": "#fbd3da"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "poi.park",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "color": "#bde6ab"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road",
    			        "elementType": "geometry.stroke",
    			        "stylers": [
    			            {
    			                "visibility": "off"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road",
    			        "elementType": "labels",
    			        "stylers": [
    			            {
    			                "visibility": "on"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road.highway",
    			        "elementType": "geometry.fill",
    			        "stylers": [
    			            {
    			                "color": "#ffe15f"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road.highway",
    			        "elementType": "geometry.stroke",
    			        "stylers": [
    			            {
    			                "color": "#efd151"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road.arterial",
    			        "elementType": "geometry.fill",
    			        "stylers": [
    			            {
    			                "color": "#ffffff"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "road.local",
    			        "elementType": "geometry.fill",
    			        "stylers": [
    			            {
    			                "color": "black"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "transit.station.airport",
    			        "elementType": "geometry.fill",
    			        "stylers": [
    			            {
    			                "color": "#cfb2db"
    			            }
    			        ]
    			    },
    			    {
    			        "featureType": "water",
    			        "elementType": "geometry",
    			        "stylers": [
    			            {
    			                "color": "#a2daf2"
    			            }
    			        ]
    			    }
    			],
    
    				mapTypeId: google.maps.MapTypeId.ROADMAP,
    				mapTypeControlOptions: {
    			        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    			        position: google.maps.ControlPosition.RIGHT_BOTTOM,
    
    			    },
    			};
    			map = new google.maps.Map(document.getElementById("googlemap<?php echo $map_id;?>"), myOptions);
    			codeAddress();
    		}
    
    		function codeAddress() {
    			var address = query;
    			geocoder.geocode({'address': address}, function (results, status) {
    				if (status == google.maps.GeocoderStatus.OK) {
    					var marker = new google.maps.Marker({
    						map: map,
    						position: results[0].geometry.location
    					});
    					<?php if(strlen($innercontent)){ ?>
    					var infowindow = new google.maps.InfoWindow({
    						content: unescape("<?php echo str_replace('+',' ',(preg_replace('/\s+/',' ',addcslashes($innercontent,'"'))));?>")
    					});
    					google.maps.event.addListener(marker, 'click', function () {
    						infowindow.open(map, marker);
    					});
    					infowindow.open(map, marker);
    					<?php } ?>
    					map.setCenter(marker.getPosition());
    					setTimeout(function () {
    						map.panBy(0, -50);
    					}, 10);
    				} else {
    					alert("Geocode was not successful for the following reason: " + status);
    				}
    			});
    		}
    
    		$(function () {
    			initialize();
    		});
    	}(jQuery));
    </script>
    <?php
    /*
    Template Name: Contact
    */
    
    //contact form submitted?
    if ($unf_options['unf_contactformemail'] ) {
    //Only allows page to show if the contact form email has been set... Closes at end of this file.
    	$contactformemail = $unf_options['unf_contactformemail']; // this is later fed into the form script
    
    if(isset($_POST['submitted'])) {
    
    	//Check to see if the honeypot captcha field was filled in
    	if(trim($_POST['checking']) !== '') {
    		$captchaError = true;
    	} else {
    
    		//Check to make sure that the name field is not empty
    		if(trim($_POST['contactName']) === '') {
    			$nameError = 'You forgot to enter your name.';
    			$hasError = true;
    		} else {
    			$name = trim($_POST['contactName']);
    		}
    
    		//Check to make sure sure that a valid email address is submitted
    		if(trim($_POST['email']) === '')  {
    			$emailError = 'You forgot to enter your email address.';
    			$hasError = true;
    		} else if (! filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
    			$emailError = 'You entered an invalid email address.';
    			$hasError = true;
    		} else {
    			$email = trim($_POST['email']);
    		}
    
    		//Check to make sure comments were entered
    		if(trim($_POST['comments']) === '') {
    			$commentError = 'You forgot to enter your comments.';
    			$hasError = true;
    		} else {
    			if(function_exists('stripslashes')) {
    				$comments = stripslashes(trim($_POST['comments']));
    			} else {
    				$comments = trim($_POST['comments']);
    			}
    		}
    
    		//If there is no error, send the email
    		if(!isset($hasError)) {
    
    			$emailTo = $contactformemail;
    			$subject = 'Contact Form Submission from '.$name.' ( Sent from : '.esc_url( home_url() ).')';
    			$sendCopy = isset($_POST['sendCopy']) ? trim($_POST['sendCopy']) : false;
    			$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
    			$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
    
    			mail($emailTo, $subject, $body, $headers);
    
    			if($sendCopy == true) {
    				$subject = 'Copy of message sent to '.esc_url( home_url() ).'.';
    				$headers = 'From: '.$name.' <'.$email.'>';
    				mail($email, $subject, $body, $headers);
    			}
    
    			$emailSent = true;
    
    		}
    	}
    }
    
    get_header();
    global $unf_options;
    
    if (!empty($unf_options['unf_contactsuccess'])){
    	$successmessage = $unf_options['unf_contactsuccess'];
    } else {
    	$successmessage = '<strong>Thanks!</strong> Your message was successfully sent.';
    }
    
    if (!empty($unf_options['unf_contactforgot'])){
    	$forgotmessage = $unf_options['unf_contactforgot'];
    } else {
    	$forgotmessage = 'You forgot to enter your';
    }
    
    if (!empty($unf_options['unf_contactinvalid'])){
    	$invalidmessage = $unf_options['unf_contactinvalid'];
    } else {
    	$invalidmessage = 'You entered an invalid';
    }
    ?>
    
    <script type="text/javascript" >
    
    jQuery(document).ready(function($){
    	jQuery('form#contactForm').submit(function() {
    		jQuery('form#contactForm .error').remove();
    		var hasError = false;
    		jQuery('.requiredField').each(function() {
    			if(jQuery.trim($(this).val()) == '') {
    				var labelText = jQuery(this).prev('label').text();
    				jQuery(this).parent().append('<div class="error alert small alert-warning"><?php echo wp_kses_post($forgotmessage);?> '+labelText+'.</div>');
    				hasError = true;
    			} else if($(this).hasClass('email')) {
    				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    				if(!emailReg.test(jQuery.trim($(this).val()))) {
    					var labelText = $(this).prev('label').text();
    					jQuery(this).parent().append('<div class="error alert small alert-warning"><?php echo wp_kses_post($invalidmessage);?> '+labelText+'.</div>');
    					hasError = true;
    				}
    			}
    		});
    		if(!hasError) {
    			jQuery('#content #submitted').fadeOut('normal', function() {
    			jQuery('#content .sendmessagebtn').hide();
    			jQuery(this).parent().append('<img src="<?php echo get_template_directory_uri(); ?>/library/img/loading.svg" alt="Loading&hellip;" height="31" width="31" />');
    			});
    			var formInput = $(this).serialize();
    			$.post($(this).attr('action'),formInput, function(data){
    				jQuery('form#contactForm').slideUp("fast", function() {
    					jQuery(this).before('<p class="thanks"><?php echo wp_kses_post($successmessage);?></p>');
    				});
    			});
    		}
    
    		return false;
    
    	});
    });
    
    </script>
    
    	<div id="content-wrapper" class="row clearfix contact-page-wrapper">
    
    		<div id="content" class="col-md-8 column">
    			<div class="article clearfix">
    				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    					<?php get_template_part( 'library/unf/featured', 'image' ); ?>
    					<h1 class="post-title"><?php the_title();?></h1>
    
    					<?php
    					$layout = $unf_options['unf_contact-blocks']['enabled'];
    					if ($layout): foreach ($layout as $key=>$value) {
    
    					    switch($key) {
    
    					        case 'googlemap': get_template_part( 'library/unf/contactmap' );
    					        break;
    
    					        case 'contactform': get_template_part( 'library/unf/contactform' );
    					        break;
    
    					        case 'contactdetails': get_template_part( 'library/unf/contactdetails' );
    					        break;
    
    					        case 'pagecontent': the_content();
    					        break;
    
    					    }
    
    					}
    					endif;
    					?>
    
    			    <?php endwhile;
    			    endif; ?>
    			</div>
    		</div>
    
    		<?php get_sidebar('contact'); ?>
    	</div>
    
    <?php get_footer(); ?>
    
    <?php } else { ?>
    Please set your contact form's receiver email <a href="<?php echo site_url(); ?>/wp-admin/admin.php?page=toddlers_options&tab=4">here</a>
    <?php } ?>
    Thread Starter ttb

    (@ttb)

    Anybody any suggestions please?

    Thanks

    Hi,

    You forgot to include jquery.min file. Include the following file just before the map file.

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    Means it will become as below.

    <?php if ( !is_page_template( 'page-contact.php' ) ) {
    if ( $map_id == 1 ) { ?>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    	<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <?php }
    	} ?>

    Please let me know if it works for you.

    Thanks

    Thread Starter ttb

    (@ttb)

    Hi,

    Thanks for your reply – and apologies for only just trying it, I didn’t get a notification for some reason.

    I’ve tried that, however it’s still returning the same errors I’m afraid. ??

    Thanks,

    Marc

    Thread Starter ttb

    (@ttb)

    Anybody, please?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Uncaught ReferenceError and Uncaught TypeError – Google Map’ is closed to new replies.