how to use geocomplete jquery plugin in wordpress?

3 Views

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>
Post Views: 3

Related posts

Leave a Reply

1 comment 

  1. 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.