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>