Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question jQuery autocomplete and google maps api. How to make this work with onClick??

    http://www.standardsolar.com/ses

    I'm trying to duplicate what they have on that third slide. It's an input field with autocomplete (with a map 100px x 100px) that goes to another page with a contact form form that displays a map. How can I get that input to pass and display on a map on the next page?

    Right now my code just autocompletes without a map popping up and it displays a map on the same page.
    Code:
    <div id="search_input_container">
    <div class="search_input_container">
    <p class="tags top">ENTER YOUR HOME ADDRESS BELOW</p>
    <p>
    <input id="gmaps-input-address" placeholder="Start typing a place name..." type="text" autocomplete="off" class="ac_input" />
    <input id="gmaps-input-address" type="submit" value="Submit" onClick="window.location='http://p.ad-mays.com/covenantchurch/?page_id=555'+submit;"/></input>
    <input type="submit" value="Submit" id="location" onClick="$window.location ="http://p.ad-mays.com/covenantchurch/?page_id=555'+submit;" /></input>
    </p>
    <p class="tags bottom">Type House Number, Street Name, City, State & Zip</p>
    
    <span id="search_submit"></span>
    </div>
    <script type="text/javascript">
    	jQuery(document).ready(function() { initQuoteRequest() });  
    	</script>
    <input id="locator_origin" type="hidden" value="MD">
    </div>
    <br/>
    
      <div id='gmaps-error'></div>
    </div>
    
    <div id='gmaps-canvas' style="height:500px;width:500px;"></div>
    </div>
    I don't really know the syntax I need here. I know it has two buttons because I was trying to see if I could get either one to work. I can't seem to get onclick to work opening a new window and how can I get that input pasted on the next page to display that map with a contact form? I'm used to just using plugins and slightly modifying some code, but this is like taking two things and throwing them together.

    Code:
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/style.css"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/rtl.css"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/editor-style.css"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/editor-style-rtl.css"></script>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCz82MxQngJyjsjacdokJd1TxhEN15LbD4&sensor=false"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/js/lib/jquery.autocomplete.css"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/lib/jquery-ui/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/js/lib/jquery-ui/css/ui-lightness/jquery-ui-1.8.5.custom.css"></script>
    
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/geo_autocomplete.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ui.geo_autocomplete.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/quote_request.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/mktSignup.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validateplugin.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jqueryautocompleteplugin.js"></script>
    
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.css"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.autocomplete.pack.js"></script>
    
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/js/lib/thickbox.css"></script>
    <link rel="stylesheet" type="text/css" href=="<?php bloginfo('template_directory'); ?>/js/lib/jquery.autocomplete.css"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.ajaxQueue.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lib/thickbox-compressed.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.autocomplete_geomod.js"></script>
    With all the trial and error with this stuff, you can see my header has a lot of files. Can anyone take a look at the source of that other page and see what I need an don't need or anyone have any tips on trying to get this to work?

  • #2
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://p.ad-mays.com/covenantchurch

    ^this is just an old website that I'm testing the code on. Let me know. I'm not a javascript wizard.

    Please feel free to comment, question, or even complain about my syntax. I need the feedback. Not a pro here and not claiming to be, so let loose. Trying to learn this stuff.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    to me it seems like the important files are
    jquery.autocomplete_geomod.js?r

    and

    geo_autocomplete.js?r

    clicking on the autocomplete just opens up a new page with a querystring (you can see it in the address bar) that is used to populate the new page's input.

    looking at your posted code makes me sleepy. Don't you have a link to a live site?

  • #4
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay wow I got it working.. had to use some different files..

    http://p.ad-mays.com/covenantchurch/
    live site

    index.php:
    Code:
    <?php
    /**
     * The main template file.
     *
     * This is the most generic template file in a WordPress theme
     * and one of the two required files for a theme (the other being style.css).
     * It is used to display a page when nothing more specific matches a query.
     * E.g., it puts together the home page when no home.php file exists.
     * Learn more: http://codex.wordpress.org/Template_Hierarchy
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     */
    
    get_header(); ?>
    <div id="frontpage">
    <div id="welcome">
    <h2 id="welcometitle"><?php esc_html_e('Welcome to Covenant Church'); ?></h2>
    <?php $my_id = 28; $post_id_28 = get_post($my_id); $content = $post_id_28->post_content;
    $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]>', $content); echo $content; ?>
    </div>
    
    
    <div>
        <a href="http://p.ad-mays.com/covenantchurch/?cat=7">
        <img id="caltitle" src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/07/calendar3-e1342034274252.jpg" />
        </a>
    </div>
    			<div id="events" role="main">
                                <!-- Start the Loop -->
                              
                            <?php
                            $page_num = $paged;
                            if ($pagenum='') $pagenum =1;
                            query_posts('cat=7&showposts=3&paged='.$page_num); ?> 
                            <?php if (have_posts()) : ?>
                            <?php while (have_posts()) : the_post(); ?>
    
                      
                                <img id="calendars" src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/06/calendardate.png" height="45px" width="45px"  />
                               
                                <div id="eventdate">
    <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
    <?php the_time('F jS, Y') ?>
                                </div>
    <div class="entry">
        <a id="eventlink" href="<?php the_permalink(); ?>">
        <?php the_excerpt(); ?> </a>
      </div>
         
    <?php endwhile; else: ?>
     <p>Sorry, no posts matched your criteria.</p>
     <?php endif; ?>
    			</div><!-- #events -->	
    
     <link type="text/css" href="styles/main.css" rel="stylesheet" />
      <link type="text/css" href="styles/jquery-ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    
      <!-- google maps -->
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
      <!-- jquery -->
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
      <!-- jquery UI -->
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    
      <!-- our javascript -->
      <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/gmaps.js"></script>
      
      <script type="text/javascript">
    	function sendAddressToNextPage() 
    	{  
    	  var submit = document.getElementById("gmaps-input-address").value;
    	  window.location="/covenantchurch/wp-content/themes/covenantchurch/contact2.php?address=" + submit;
    	};
    </script>
    </head>
    
    <body>
    <div id="search_input_container">
    <div class="search_input_container">
    <p class="tags top">ENTER YOUR HOME ADDRESS BELOW</p>
    <p>
    <input id="gmaps-input-address" placeholder="Start typing a place name..." type="text" autocomplete="off" class="ac_input" />
    <span id="submit"><input id="gmaps-input-button" type="submit" value="Submit" onClick= "sendAddressToNextPage()"/></input></span>
    <!--<span id="search_submit"><input type="submit" value="Submit" id="location" onClick= "window.location sftp://www-data@filemanager/var/www/covenantchurch/wp-content/themes/covenantchurch/contact.php;" /></input></span>-->
    </p>
    <p class="tags bottom">Type House Number, Street Name, City, State & Zip</p>
    <span id="search_submit"></span>
    </div>
    
    <input id="locator_origin" type="hidden" value="MD">
    </div>
    <br/>
    
      <div id='gmaps-error'></div>
    </div>
    
    <div id='gmaps-canvas' style="height:500px;width:500px;"></div>
    </div>
    		
    <div id="women">
        <a href="http://p.ad-mays.com/covenantchurch/?page_id=110"> 
            <img src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/07/womenofword3-e1341592443436.jpg" />
        </a>
    </div>
    <div id="music">
        <a href="http://p.ad-mays.com/covenantchurch/?page_id=113"> 
            <img src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/07/musicgospelministry3-e1341592410707.jpg" /> 
        </a>
    </div>            
    <div id="youth">
        <a href="http://p.ad-mays.com/covenantchurch/?page_id=212">
            <img src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/07/youthmin3-e1341592377689.jpg" />
        </a>
    </div>
    <div id="covconnect">
        <a href="http://p.ad-mays.com/covenantchurch/?page_id=260">
            <img src="http://p.ad-mays.com/covenantchurch/wp-content/uploads/2012/07/covenantconnection3-e1341592340322.jpg" />
        </a>                            
    </div>
    </div>
    <?php get_footer(); ?>
    contact2.php that opens when you click submit:
    Code:
    <!-- jquery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <!-- jquery UI -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    <script type="text/javascript">
    function getUrlVars()
    {
    	var vars = [], hash;
    	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    	for(var i = 0; i < hashes.length; i++)
    	{
    		hash = hashes[i].split('=');
    		vars.push(hash[0]);
    		vars[hash[0]] = hash[1];
    	}
    	return vars;
    }
    		
        $(document).ready(function(){
    	alert("#YOLO #SWAG");
    	
    	$("#address").val(getUrlVars()["address"].replace(/%20/g, " "));
    	
          map = new GMaps({
            div: '#map',
            lat: -12.043333,
            lng: -77.028333
          });
         
    	 GMaps.geocode({
              address: $('#address').val().trim(),
              callback: function(results, status){
                if(status=='OK'){
                  var latlng = results[0].geometry.location;
                  map.setCenter(latlng.lat(), latlng.lng());
                  map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng()
                  });
                }
              }
            });
    	 
        });
      </script>
    
    <h1>Evaluation Form Request</h1>
    
    Your Address Is:
    <!--<input id="gmaps-input-address" placeholder="Start typing a place name..." type="text" autocomplete="off" class="ac_input" />-->
     <form method="post" id="geocoding_form">
              <label for="address">Address:</label>
              <div class="input">
                <input type="text" id="address" name="address" />
                <input type="submit" class="btn" value="Search" />
              </div>
            </form>
            <div class="popin">
              <div id="map" style="height:300px; width:300px;"></div>
            </div>
    </form>
    
    <script type="text/javascript" src="http://p.ad-mays.com/covenantchurch/wp-content/themes/covenantchurch/js/gmaps2.js"></script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •