How to fetch geo coordinates in add/edit entry form

Create custome text field and add below code.

<script src="http://maps.google.com/maps?file=api&v=2&key={googleApiKey}" type="text/javascript"></script>

<div id="map" style="width: 500px; height: 340px"></div>

<p><span>Type your address:</span> <input type="text" size="43" id="address" value="Street, City" />
<input type="button" value="Search" onclick="showAddress()" /></p>

<script type="text/javascript">

//<![CDATA[

var start_latitude = "62.103882522897855";
var start_longitude = "20.56640625";
var zoomlevel_add = 3;
var zoomlevel_edit = 15;

var lat = document.getElementById('field_latitude').value;
if (lat == "")
lat = start_latitude;
var lng = document.getElementById('field_longitude').value;
if (lng == "")
lng = start_longitude;
if (lat == start_latitude)
zoomlevel = zoomlevel_add;
else
zoomlevel = zoomlevel_edit;

if (!GBrowserIsCompatible()) {
alert('Sorry, your browser don\'t support Google Maps.');
}

var map = null;
var geocoder = null;
var marker = null;

// Build map
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(lat, lng), zoomlevel);
geocoder = new GClientGeocoder();

if (lat == start_latitude) {
function showAddress(address) {
var address = document.getElementById("address").value;

if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("Sorry, but we couldn\'t locate " + address + ".");
} else {
var lat = point.lat();
var lng = point.lng();
map.setCenter(new GLatLng(lat,lng), zoomlevel_edit);

if (marker) map.removeOverlay(marker);
marker = new GMarker(point, {draggable: true});
document.getElementById("field_latitude").value = point.lat();
document.getElementById("field_longitude").value = point.lng();

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

// Display coordinates when marker is dragged
GEvent.addListener(marker, "drag", function() {
document.getElementById('field_latitude').value = marker.getPoint().y;
document.getElementById('field_longitude').value = marker.getPoint().x;
});

// Open infowindow when dragging stops
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("This is the new position!");
});

map.addOverlay(marker);
marker.openInfoWindowHtml("<div style='width:200px; height:100px;'>" +
"<strong>Check the position of the marker!</strong>" +
"<br /><br />" +
"If it's wrong, then drag and drop the marker to the correct position!" +
"</div>");
}
}
);
}
}
} else {

// Add marker
var point = new GLatLng(lat,lng);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);

// Display coordinates when marker is dragged
GEvent.addListener(marker, "drag", function() {
document.getElementById('field_latitude').value = marker.getPoint().y;
document.getElementById('field_longitude').value = marker.getPoint().x;
});

// Open window when dragging stops
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Position of the marker has been changed!");
});
}
//]]>

</script>

Share
This entry was posted in Business Directory, Joomla. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free