Set physical location in forms

Hello good people.

Is there a way I can insert a map in a form, so that a user can set his/her location from it and it'll be saved and the admin on the other end can login/receive an email with the user co-ordinates or better yet a view of the map with the users location? I don't know if this has been asked before of if there's a Joomla plugin available that does that already; my apologies if there is.

Thanks in advance.

Hi hostepperk,

It's certainly possible, there are a couple of threads here on Google Maps. Here's one.

Bob

Thanks for the quick reply.

I've just placed my code on the site (Form html and javascript) at the beginning of the form code and its given me this error.

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/site/public_html/components/com_chronocontact/chronocontact.html.php(180) : eval()'d code on line 3

am I placing it right?

Hi hotstepperk ,

Yes, but there is some kind of PHP error on line 3 of the Form HTML. What are the first few lines?

Bob

<?php 
$doc =& JFactory::getDocument();
$doc->addScript"http://maps.google.com/maps?file=api&v=2&sensor=false&key=xxx . . . xxx");
?>
<div id="map_canvas" style="width: 670px; height: 430px"></div>

Hi hotstepperk,

Sorry I missed this post yesterday. This line

$doc->addScript"http://maps.google.com/maps?file=api&v=2&sensor=false&key=xxx . . . xxx");

is missing a (, and probably doesn't need the HTML entities. Try

$doc->addScript("http://maps.google.com/maps?file=api&v=2&sensor=false&key=xxx . . . xxx");

Bob

Just tried it, and put my google api key but now its just a blank space with the co-ordinates of the map. 🤨 🤨

Hi hotstepperk,

Step 1, I've updated the map display part of this so that it is debugged and working with the latest Google Maps API. Here's the code:

In the Form HTML you need a div with an id=map_canvas (or some other id provided that you change the script below to match).

You need MooTools to be loaded on the page.

In the Form JavaSCript box

window.addEvent('domready', function() {
  initialize()
});

function initialize() {
  var latlng = new google.maps.LatLng(48.551785, -4.662108);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map($("map_canvas"), myOptions);
};

You can see this working here.

When I have time later I'll try adding the on-Click feedback.

Bob

Hi hotstepperk,

Updated version: this show a marker when you Click on the map and displays the marker latitude and longitude in two text inputs under the map. These would be submitted as form data and could be used to create a similar map on a form accessible to the admins.

Form HTML:

<?php
JHTML::_('behavior.mootools');
$doc =& JFactory::getDocument();
$doc->addScript("http://maps.google.com/maps/api/js?sensor=false");
?>
<div id="map_canvas" style="margin-left:-136px; width: 516px; height: 400px"></div>
Lat:<input type='text' name='lat' id='lat' value='' readonly='readonly' />Long:
<input type='text' name='lng' id='lng' value='' readonly='readonly' />

Form JavaScript:

window.addEvent('domready', function() {
  initialize()
});

function initialize() {
  var latlng = new google.maps.LatLng(48.551785, -4.662108);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  map = new google.maps.Map($("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
    $('lat').value = event.latLng.lat();
    $('lng').value = event.latLng.lng();
  });
};

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}

Clearly more could be done to tidy this up, make the marker draggable, prevent multiple markers, etc. but the basics are here and working.

Bob