Forums

Hi everyone, I'm quite new to chronoforms and just realising how versatile it is.

I've added a google map to a form that allows the user to drag the marker to a point, which displays longitude and latitude coordinates. The form is then submitted and it works great - thanks to a post I read by Greyhead. Great work - many thanks!

What I also wanted to add was the option of the user searching for an address first (either postcode or full address), then dragging the marker to make it more accurate. I've tried adding a search field with a submit button, but this affects the normal form submit button. Does anyone have know how I can get around this? Any help would be much appreciated.

Thanks,

Dan

Hi travelsaway,

In the example you showed me the extra search field and button were wrapped in <form> tags. This won't work becasue HTML doesn not permit one ste of <form> tags to be nested inside another set and ChronoForms wraps the whole form in it's own form tags.

The search form uses JavaScript and it should be possible to trigger this script when the user clicks a button without using the extra <form> tags.

Bob

Thanks Bob, for the quick reply. I should've noticed that there's a hint not to use FORM.

I hate to ask but I don't suppose you'd have an example of what I need to add. I'm not a developer, but have managed to stumble my way through so far.

Here's what I have in the FORM HTML:

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Map Location Demo</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Drag the marker on the map to the desired location and press submit.</span> </div>
  <div class="cfclear"> </div>
</div>


Latitude: <input class="required" type="text" name="latitude" id="latitude" value="33.03536277133918" />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-80.12981414794922"/>
<br /><br />
<div id="map" style="width: 600px; height: 500px"></div><?php
if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$doc->addScript('http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxx');
?>
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_4" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

And here's the JAVASCRIPT code (Which you'll probably recognise too🙂 ):

    window.addEvent('domready', function() {
      if (GBrowserIsCompatible())
      {
       // create map and add controls
       var map = new GMap2(document.getElementById("map"));
       map.addControl(new GLargeMapControl());       
       map.addControl(new GMapTypeControl());
       
       // set centre point of map
       var centrePoint = new GLatLng('33.03536277133918', '-80.12981414794922');
       map.setCenter(centrePoint, 14);   
       
       // add a draggable marker
       var marker = new GMarker(centrePoint, {draggable: true});
       map.addOverlay(marker);
       
       // add a drag listener to the map
       GEvent.addListener(marker, "dragend", function() {
          var point = marker.getPoint();
          map.panTo(point);
          document.getElementById("latitude").value = point.lat();
          document.getElementById("longitude").value = point.lng();
        });
      }
    });

I've tried a few ideas, such as adding the "enablegooglebar()" otpion, but it diables the draggable marker - and it also shows adverts. I'm still searching examples, but haven't had any joy so far.

Sorry to be a pain.

Dan

Hi Travelsaway,

Interesting little question. Here's a version of your code updated to include the address lookup.
Form HTML:

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Map Location Demo</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Enter your address here and click the button to update the map.</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text">
    <input style='width:300px;' type="text" name="address" id="address" value=""  />
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Find address" name="find_address" id="find_address" type="button" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Or drag the marker on the map to the desired location and press submit.</span> </div>
  <div class="cfclear"> </div>
</div>
Latitude: <input class="required" type="text" name="latitude" id="latitude" value="33.03536277133918" />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-80.12981414794922"/>
<br /><br />
<div id="map" style="width: 600px; height: 500px"></div><?php
if ( !$mainframe->isSite() ) {return;}
$doc =& JFactory::getDocument();
$doc->addScript('http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxx_insert_your_key_here_xxxxxxxxxx');
?>
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_4" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Form JavaScript:

window.addEvent('domready', function() {
  if (GBrowserIsCompatible()) {
    // create map and add controls
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());       
    map.addControl(new GMapTypeControl());
    geocoder = new GClientGeocoder();
       
    // set centre point of map
    var centrePoint = new GLatLng('33.03536277133918', '-80.12981414794922');
    map.setCenter(centrePoint, 14);   
       
    // add a draggable marker
    var marker = new GMarker(centrePoint, {draggable: true});
    map.addOverlay(marker);
       
    // add a drag listener to the map
    GEvent.addListener(marker, "dragend", function() {
      var point = marker.getPoint();
      map.panTo(point);
      document.getElementById("latitude").value = point.lat();
      document.getElementById("longitude").value = point.lng();
    });
  }
  function showAddress() {
    var address = $('address').value;
    if (geocoder && address) {
      geocoder.getLatLng(
        address,
        function(point) {
          if (!point) {
            alert(address + " not found");
          } else {
            map.setCenter(point, 13);
            var marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(address);
            $('longitude').value = point.lng();
            $('latitude').value = point.lat();
          }
        }
      );
    }
  }
  $('find_address').addEvent('click', showAddress); 
});

NB This code is working OK. It needs the MooTools library loaded (ChronoForms usually loads it).

Hi Bob,

thanks for your help - yet again! I've just enrolled on a few courses (php/mysql/etc), so hopefully I won't be as useless in the future!

I've got one issue though - is it possible for the marker to still remain draggable after clicking "Find Address"? I had posted on a couple of the google map forums, but have had no feedback yet - so any more assistance would be fantastic. Happy Easter by the way!

Is it a case of moving the position of the dragaable marker and listener, within the code?

Many thanks,

Dan

Done it! 99% anyway.

I copied the listener event and made the second marker draggable. It seems to work well, but it does allow multiple markers (not really a problem though). I reckon the code could be tidied up a bit, but I wouldn't have a clue how to do that.

Thanks for all your help - you are a legend, and a gent. You also helped stop me going insane!

Here's my final code: Please feel free to tidy it up - no worries if not - it works 😀

    window.addEvent('domready', function() {
      if (GBrowserIsCompatible()) {
        // create map and add controls
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());       
        map.addControl(new GMapTypeControl());
        geocoder = new GClientGeocoder();
           
        // set centre point of map
        var centrePoint = new GLatLng('33.03536277133918', '-80.12981414794922');
        map.setCenter(centrePoint, 14);   
           
        // add a draggable marker
        var marker = new GMarker(centrePoint, {draggable: true});
        map.addOverlay(marker);
        }
      function showAddress() {
        var address = $('address').value;
        if (geocoder && address) {
          geocoder.getLatLng(
            address,
            function(point) {
              if (!point) {
                alert(address + " not found");
              } else {
                map.setCenter(point, 13);
                var marker = new GMarker(point, {draggable: true});
                map.addOverlay(marker);
                
              }
// add a drag listener to the map
        GEvent.addListener(marker, "dragend", function() {
          var point = marker.getPoint();
          map.panTo(point);
          document.getElementById("latitude").value = point.lat();
          document.getElementById("longitude").value = point.lng();
        });          
  }
          );
        }
      }
      $('find_address').addEvent('click', showAddress);
    });

Hi travelsway,

Well done,

I guess you could disable the 'Find address' button after one use to stop the multiple markers.

Bob

Hello guys, Google is moving to API v3. Is there any chance that someone can update this code ?