Forums

Having resisted posting until I trawled through the forums and tried various examples, I have no option but to admit defeat ... grrr.

I'm trying to implement what seems to be a common solution so am really hoping someone can see where I'm going wrong.

Having been using Chronoforms for a few days now and achieved most of the other form requirements both in simple mode and advanced mode, I'm starting to get a good feel for how to use CF (excellent product BTW !!) so a little frustrated that this is defeating me.

I have been looking at the Google Maps JavaScript API v3 reference material and it all seems to make sense so not sure why it's not working for me.

What I'm trying to achieve
[list]Present a google map on a form (done)
User can either enter an address or click on the map and place a marker (problem)
Existing locations from the database displayed on the map (haven't started)[/list]

The problem
I'm trying to get the asynchronous callback to do the address lookup (Geocoding) but am simply not getting any response.

The code I'm using suggests that once the lookup is achieved and the GeocoderStatus is OK the map should centre on the location.

I've taken the code pretty much verbatim from the Google website, so am wondering if the issue I'm having is with making the making and handling the response, or simply my understanding of where to put the code in CF.

My Config
I have created a completely new form just to test the map so nothing from the standard form is interfering

I have a custom code module:

<div id="panel">
      <input id="address" type="textbox" value="Worcester, England">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
<div id="googleMap" style="width:500px;height:380px;"></div>

In the OnLoad event block I have:
1) A "Custom code" block to load the Google scripts

 <?php
    $doc =& JFactory::getDocument();
    $doc->addScript("https://maps.googleapis.com/maps/api/js?v=3.exp");
    ?>

2) A "Load Javascript" block

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);

} //end function


function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

google.maps.event.addDomListener(window, 'load', initialize);

3) The "Render HTML" command block (the only option changed from default is to perform a "POST").


As you can see it's all pretty basic, so convinced I'm doing something dumb, but as it's almost 1am I can't for the life of me see what it is ... HELP !!! 😲

Thanks in advance,
Tim

Hi Tim,

The main problem is that geocoder isn't defined. I've updated your code a bit - you can see the result here.

In the Designer tab I removed the onClick and added an id='address':

<div id="panel">
      <input id="address" type="textbox" value="Worcester, England">
      <input type="button" value="Geocode" id='geocode' >
    </div>
<div id="googleMap" style="width:500px;height:380px;"></div>

In the Setup tab I merged both files into the Load JS action. In the JS Code box I have:

jQuery(document).ready(function(jQ) {
  var map;
  jQ('#geocode').click(codeAddress);

  function initialize() {
    var mapOptions = {
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(jQ('#googleMap')[0], mapOptions);
    geocoder = new google.maps.Geocoder(); // this line was missing
  } //end function

  function codeAddress() {
    var address = jQ('#address').val();
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
});

This wraps the Google function in jQuery and lets me access the form inputs and events with jQuery.
In the JS Files box I have

https://maps.googleapis.com/maps/api/js?v=3.exp

Bob

PS If you want to get more ambitious I have a similar form here using AutoCompletion.

Bob,

Thanks for your prompt reply.

I was looking for my post yesterday morning and couldn't find it, which left me thinking that the bottle of very nice French red I'd enjoyed on Thursday night was the source of all my troubles ... so am pleased that not only had I posted after all but that you'd taken the time to look into my problem.

After some sleep and a clearer head in the morning I started from fresh and came up with an almost identical solution (although your elegant wrapping of the function in JQuery is nice and have amended my code accordingly).

It was a combination of the wine, a late night and having spent too long at it, in one session !

Additionally, I really like your AutoCompletion and intend to incorporate the functionality today.

I have also installed the ChronoConnectivity and have been able to retrieve the records from the DB, albeit into a table at this stage ... the intention being to add markers to the map for each record returned so the head scratching for that begins today.

I am VERY impressed by these components ... clean, neat, intuitive, very elegant and highly functional. Takes a little time to work out how to use them due to their complexity (a GOOD thing) but that is my failing and not one of the components.

Given your guru status it is clear that you've either been involved in the development of the components or have been using them for a long time so your assistance is gratefully received.

Hope you enjoy the coffee ! Clearly better for you than red wine !
Thanks again,
Tim.