Field Autocomplete issue with MapPress plugin WordPress

Google Field Autocomplete works properly after completing points 1) and 2)

<strong>Problem:</strong>: Field Autocomplete does not work anymore after including a Google map after completing point 3)

<strong>Question:</strong>
Could somebody help determine what is causing Autocomplete to stop working after completing point 3) ?


----------------------------------------------------------------------
<strong>1) </strong> Edited file: wp-content/themes/classipress-child/includes/<strong>search.php</strong>

Added code:

<script type="text/javascript">
var options = {
types: ['(cities)'],
componentRestrictions: {country: "ch"}
};
var input = document.getElementById('cp_city_zipcode');
var autocomplete = new google.maps.places.Autocomplete(input, options);
</script>
----------------------------------------------------------------------
<strong>2) </strong>Edited file: /wp-content/themes/classipress-child/<strong>functions.php</strong>

Added code:

function include_google_places_api() {

//register google maps api if not already registered
if ( !wp_script_is( 'google-maps', 'registered' ) ) {
wp_register_script( 'google-maps', ( is_ssl() ? 'https' : 'http' ) . '://maps.googleapis.com/maps/api/js?libraries=places&sensor=false', array( 'jquery' ), false );
}

//enqueue google maps api if not already enqueued
if ( !wp_script_is( 'google-maps', 'enqueued' ) ) {
wp_enqueue_script( 'google-maps' );
}
}
add_action( 'wp_enqueue_scripts', 'include_google_places_api' );
----------------------------------------------------------------------
<strong>3) </strong>Installed MapPress plugin and Added Map:
Updated file: /wp-content/themes/classipress-child/<strong>header.php</strong>


Added lines:
<div class="header_map">
<center>
<?php
if(is_search()) {
$arg = array('w'=>'100%','h'=>'400px',); //w=width & h=height
do_action('wpw_listing_n_search_gmap',$arg);
}

?>
</center>
</div><!-- /header_map -->

Answers (1)

2015-05-20

tom-hkwebs answers:

Hello,

your code does not seem to contain any error which could make the Autocomplete feature stop working...

In order to get more information about the issue you are facing without to reproduce your wordpress set-up, you can try to use the browser Debug tool, which should gives you more information about javascript errors (the Autocomplete feature being based on a Google javascript library). For example using Google Chrome browser :

- visit the page of your site where you are facing the issue with the Autocomplete feature
- press F12 to display the Debug Tool, and click on the "Console" tab
- try to reload the current page, and see if there are some errors detected by the Debug Tool. If not, you can try as well to start typing in the search field (which should trigger the Autocomplete feature), and look at the same time at the Console tab of the Debug tool.

---

pinic comments:

Thank you. Using similar method (Elements inspection / breakpoints) on Google Chrome allowed to identify the error message with Java script and related solution.

Error: Uncaught TypeError: Cannot read property 'autocomplete' of undefined

Solution: The autocomplete library is actually a separate library that must be explicitly loaded.

The following line solved the problem:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>