Display Map inside form

Hi,
i started creating a form usinsg CF v5.
I would like to enable the registered user to create a joomla-article + a placemark for zhGoogleMaps.
Therefor i need a form which displays a map, where the user can select a specific place.

Is there a way to display a map inside the form?

Regards
hagen

Hi hagen,

Please try adding the code to a Custom Code element in your form. I don't know what is needed for zhGoogleMaps though.

Bob

Hi,
thanks for your reply.
Where are the ccordinates, which i need for the joomla-articles + placemark, stored then?
I can add some custom-code but how do i get the information back into a field?

Hi Hagen,

As I said I know nothing about zhGoogleMaps - you can probably add some JavaScript to add the results of a map click to inputs in the form so that they will be saved. If you search on for example site:chronoengine.com google maps you will see several threads on using maps with forms.

Bob

Thanks,
i`v created a new form.
Added a custom field:

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

On Setup, i added Load-JS:

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);
});

JS-Files:

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

How do i get the marker to be moveable?
And how do i get the results into the form?

Hi Hagen,

That looks like code to put a marker on a map from an address. Is that what you need?

Please check the Google Maps documentation for ways to move the marker and to get its location.

Bob

Hi Bob,
thats a part of what i need.
I got the markere to be draggable...but now i got another problem.
Everytime i use the "geocode"-Button, a new marker is created...
Only one marker should be shown on the map.

After that, i need the information from the marker in 2 CF-fields.

hagen

Hi,
i`ve found this script to insert a marker at the map by click.

  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    addMarker(event.latLng);
  });

If this would work, it would be great.
But if i add this to my JS, the map doen`t get displayed any more...

I`m sorry, i never had to edit or insert some JS-code before.

Regards
hagen

Hi Hagen,

Then there is probably an error in your JavaScript that will need to be fixed.

Bob

Hello Bob,

my actual JS looks like this:

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

	function initialize() {
		var mapOptions = {
		  zoom: 8,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(48.796, 9.009)
		};

		map = new google.maps.Map(jQ('#googleMap')[0], mapOptions);
		geocoder = new google.maps.Geocoder(); // this line was missing

		  // This event listener will call addMarker() when the map is clicked.
		  map.addListener('click', function(event) {
			addMarker(event.latLng);
		  });	

	} //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,
			  draggable: true
			});
		  } else {
			alert("Das Ziel konnte leider nicht gefunden werden: " + status);
		  }
		});
	}
  
	function addMarker(location) {
	  var marker = new google.maps.Marker({
		position: location,
		map: map,
		draggable: true		
	  });
	  markers.push(marker);
	}
    
  google.maps.event.addDomListener(window, 'load', initialize);

});

Adding a marker by click works now.
Next problem: I can add more than one marker....any hint for that?

Regards
hagen

I´m getting clsoer.
Adding only one placemark by click works!🙂
But if i use the geocode-button, i get still more markers.

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

	function initialize() {
		var mapOptions = {
		  zoom: 8,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(48.796, 9.009)
		};

		map = new google.maps.Map(jQ('#googleMap')[0], mapOptions);
		geocoder = new google.maps.Geocoder(); // this line was missing

		  // This event listener will call addMarker() when the map is clicked.
		  map.addListener('click', function(event) {
			addMarker(event.latLng);
		  });	

	} //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,
			  draggable: true
		  });
		} else {
		  alert('Geocode was not successful for the following reason: ' + status);
		}
	  });
	}
  
	function addMarker(location) {
		if (!marker) {
			marker = new google.maps.Marker({
				position: location,
				draggable: true,				
				map: map
			});
		} else {
			marker.setPosition(location);
		}
	  markers.push(marker);
	}
  
  
  google.maps.event.addDomListener(window, 'load', initialize);

});

Making progress...
disabled the new marker when geocode is used solves my problems🙂
Last great task: How to get the information back into the form and late into the mail or db?

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

	function initialize() {
		var mapOptions = {
		  zoom: 8,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(48.796, 9.009)
		};

		map = new google.maps.Map(jQ('#googleMap')[0], mapOptions);
		geocoder = new google.maps.Geocoder(); // this line was missing

		  // This event listener will call addMarker() when the map is clicked.
		  map.addListener('click', function(event) {
			addMarker(event.latLng);
		  });	

	} //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,
			//  draggable: true
		  //});
		} else {
		  alert('Geocode was not successful for the following reason: ' + status);
		}
	  });
	}
  
	function addMarker(location) {
		if (!marker) {
			marker = new google.maps.Marker({
				position: location,
				draggable: true,				
				map: map
			});
		} else {
			marker.setPosition(location);
		}
	  markers.push(marker);
	}
  
  
  google.maps.event.addDomListener(window, 'load', initialize);

});

Hi hagen,

If I remember correctly the Google Maps location object has the information you need, you can add JavaScript to copy the parts you need into a form input.

Bob

If i would know how....
I found this is die api dokumentation: marker.getPosition()
But don`t know how to fill the field lat & lng ?!

Hi Hagen,

There's an old post here that is doing this. It's using MooTools, not jQuery, and the Google code may have changed but you can see the basics here

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

Bob

Tried your code and

document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();	

Both didn`t work....

Got it:
Had to remove the drag-feature from the marker sinde the drag-event didn`t changed the field-values.
Maybe this could be added by additional JS, but this works for me.🙂

Designer: Custom-Item

<div id="panel"><input id="address" type="textbox" value="Ausflusgzeil suchen" /> <input id="geocode" type="button" value="suchen" /></div>
<div id="googleMap" style="width: 800px; height: 250px;"> </div>
<div id="leftContainer" style="float:left;padding-right:20px;">
  <span>Lat:</span>
  <br><input type='text' name='lat' id='lat' value='' />
</div>
<div id="rightContainer" style="float:left;">
  <span>Lng:</span>
  <br><input type='text' name='lng' id='lng' value='' />
</div>

Setup: JS Code:

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

	function initialize() {
		var mapOptions = {
		  zoom: 6,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(52.283, 10.523),
		  mapTypeControl: true,
		  mapTypeControlOptions: {
		  mapTypeIds: [
			google.maps.MapTypeId.ROADMAP,
			google.maps.MapTypeId.TERRAIN,
			google.maps.MapTypeId.SATELLITE,
			google.maps.MapTypeId.HYBRID ],
		  position: google.maps.ControlPosition.LEFT_BOTTOM ,
		  style: google.maps.MapTypeControlStyle.DEFAULT },
		  zoomControl: true,
		  zoomControlOptions: {
		  position: google.maps.ControlPosition.LEFT_CENTER },
		  disableDoubleClickZoom: false,
		  scrollwheel: true,
		  scaleControl: false,
		  streetViewControl: false,
		  rotateControl: false
		};

		map = new google.maps.Map(jQ('#googleMap')[0], mapOptions);
		geocoder = new google.maps.Geocoder(); // this line was missing

		  // This event listener will call addMarker() when the map is clicked.
		  map.addListener('click', function(event) {
			document.getElementById('lat').value = event.latLng.lat();
			document.getElementById('lng').value = event.latLng.lng();		  
			addMarker(event.latLng);
		  });
		  
	} //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);
			map.setZoom(14); 
		    //var marker = new google.maps.Marker({
			//  map: map,
			//  position: results[0].geometry.location,
			//  draggable: true
		    //});
		} else {
		  alert('Geocode was not successful for the following reason: ' + status);
		}
	  });
	}
  
	function addMarker(location) {
		if (!marker) {
			marker = new google.maps.Marker({
				position: location,
				//draggable: true,				
				map: map
			});
		} else {
			marker.setPosition(location);
		}
	  markers.push(marker);
	}

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

});

Setup: JS Files

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

Hi Hagen,

Great - well done :-)

Bob