CODEWITHSUNDEEP
wordpressgeocoding
Kedar B
Kedar B

Reputation: 784

how to use geocomplete jquery plugin in wordpress?

I have jquery geocomplete plugin but I dont know how to use it in Wordpress. I know how to use in plain php. so anyone can tell me how to use it in Wordpress?? This is my code..

 <form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>

<div class="map_canvas"></div>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="../jquery.geocomplete.js"></script>
<script src="logger.js"></script>

<script>
  $(function(){

    var options = {
      map: ".map_canvas",
      location: "NYC"
    };

    $("#geocomplete").geocomplete(options);

  });
</script>

Upvotes: 1

Views: 765

Answers (1)

Arka
Arka

Reputation: 591

add_action( 'wp_head', 'add_geocomplete_script' );

function add_geocomplete_script() {
   ?>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="<?php echo get_template_directory_uri() ?>/js/jquery.geocomplete.js"></script>
   <script src="<?php echo get_template_directory_uri() ?>/js/logger.js"></script>
   ?>
}


add_shortcode('show_my_geocomplete', 'show_my_geocomplete_func');

function show_my_geocomplete_func(){
   ?>
   <form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>

<div class="map_canvas"></div>
   <script>
   jQuery(document).ready(function(){ 
    var options = {
      map: ".map_canvas",
      location: "NYC"
    };

    jQuery("#geocomplete").geocomplete(options);

  });
</script>
   <?php
}

Place these above code in function.php

then add shortcode "[show_my_gocomplete]" to your post or pages.

other wise add shorcode to your template file

<?php do_shortcode('[show_my_gocomplete]'); ?>

place your other js files in your theme_folder/js folder

I haven't added jquery lib here, as its already available in wordpress.

there are some good way to implement it, like enqueue your script.

Upvotes: 1

Related Questions