0

I am struggling with using a callback for my Google Maps API. I am trying to have a Goolge Maps autocomplete search box and collect the Lat and Long for the searched location. I've found this answer that works really well, but sometimes the search box won't load the location suggestions. I've found that this might be caused by the google.maps.event.addDomListener(window, 'load', initialize); that I use. Instead I've found that I need to use a callback in my script. I tried that but now the search box won't load any suggestions anymore. Below is what I have now. Am i doing something wrong? Thanks a million for your help and suggestions!

In functions.php

<?php
//ENQUE SCRIPTS
function my_enqueue() {
    // First register script
    // Google maps API
    wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXXXXX&libraries=places&callback=initialize');
    wp_register_script( 'ajax-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery') );
    
    // Then enqueue script
    wp_enqueue_script( 'googlemaps' ); 
    wp_enqueue_script( 'ajax-script' ); 
  }
  add_action( 'wp_enqueue_scripts', 'my_enqueue' );
?>

In custom.js

jQuery( document ).ready(function($) {
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                window.alert("Select a suggestion from the list");
                return;
              }

              document.getElementById('city2').value = place.name;
              document.getElementById('cityLat').value = place.geometry.location.lat();
              document.getElementById('cityLng').value = place.geometry.location.lng();
          });
      }
      //Window load does not seem to always work?
      //google.maps.event.addDomListener(window, 'load', initialize);
}); //Close document ready

In html

<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
5
  • 1) Anything in the console? 2) ajax-script doesn't depends on googlemaps in your code.
    – Max Yudin
    Commented Dec 24, 2021 at 10:57
  • Thanks for your reply. Nothing in the console... I tried adding dependencies but that didn't work...
    – RobbTe
    Commented Dec 24, 2021 at 11:07
  • Oh sorry, it says "initialize is not a function" in the console. How come it is not a function?
    – RobbTe
    Commented Dec 24, 2021 at 11:10
  • If it's not the script enqueue fault, then the problem is out of the WordPress scope. Try to ask the question on a appropriate site.
    – Max Yudin
    Commented Dec 24, 2021 at 11:51
  • Looks like the mess with JavaScript: nothing declares there to mention jQuery somehow.
    – Max Yudin
    Commented Dec 24, 2021 at 11:57

1 Answer 1

1

Try this in your js file:

    function robbte_map_initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();
              if (!place.geometry) {
                window.alert("Select a suggestion from the list");
                return;
              }

              document.getElementById('city2').value = place.name;
              document.getElementById('cityLat').value = place.geometry.location.lat();
              document.getElementById('cityLng').value = place.geometry.location.lng();
          });
      }

      jQuery(document).ready (robbte_map_initialize);
1
  • Simple document ready seems to work, thanks!
    – RobbTe
    Commented Dec 27, 2021 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.