Podemos sacarle mucho provecho a Google Maps. Una característica interesante son los marcadores ó marcas (makers) que podemos ubicar sobre los mapas. Este pequeño artículo te explica, de manera general, como podemos hacer para agregar marcas haciendo uso de un formulario HTML sobre el mismo mapa. Usaremos código PHP para guardar estos marcadores en un archivo XML. Cuando se carge nuevamente el mapa cargará las marcas guardadas en el archivo XML. Haremos uso de jQuery para el manejo de JavaScript sin complicaciones.

Primero lo primero, necesitaremos jQuery. Luego vamos a crear un archivo XML al cual nombraremos markers.xml. Con esta estructura:

<?xml version="1.0" encoding="UTF-8"?>
<markers>
</markers>

El siguiente archivo lo llamaremos maps_form.php, en resumidas cuentas realizará lo siguiente:

  • guardar los marcadores nuevos en el archivo markers.xml.
  • mostrar el mapa con los marcadores ya agregados.
  • y mostrar el formulario para agregar un nuevo marcador.
<?php
// si hay datos ...
if(isset($_POST['submit'])) { 
	// file_get_contents -> leer el contenido de un archivo
	$fh = file_get_contents('markers.xml');  
          
    try {  
		// SimpleXMLElement- > leemos documentos XML
    	$xml = new SimpleXMLElement($fh);  
    } catch (Exception $e) {  
		// mensaje de error 
        echo $e->getMessage();  
    }  
    
	// addChild -> agregar un nodo nuevo
    $marker = $xml->addChild('marker');  
	
	// atributos
    $marker->addAttribute('lat', $_POST['lat']);  
    $marker->addAttribute('lng', $_POST['lng']);  
    $marker->addAttribute('msg', utf8_encode($_POST['msg']));  
    $marker->addAttribute('name', utf8_encode($_POST['name']));  
    $marker->addAttribute('link', utf8_encode($_POST['link']));  
    
	// fopen-> abre un archivo
    $fp = fopen('markers.xml','w');  
	// fwrite-> escribe sobre un archivo
    fwrite($fp, $xml->saveXML()); 
	// fclose-> lo obvio ..
    fclose($fp);  
	
	// direccionamos a la misma pagina
    header('Location:maps_form.php');  
}  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formularios en Google Maps</title>
<!--tu codigo api para google maps aqui-->
<script src="http://maps.google.com/maps?xxx" type="text/javascript"></script>
<!-- libreria jQuery -->
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    
	var mark;
	var pointA;
	
	if (GBrowserIsCompatible()) {
		var m = $("#map")[0];
		
        if(m) {
			var map = new GMap2(m);
			// iniciamos el mapa en esta ubicacion, tu puedes ubicarla donde gustes
			var start = new GLatLng(63.13450320833446,16.69921875);
			// otras configuraciones
			var zoomLevel = 5;
			map.setCenter(start, zoomLevel);
			map.addControl(new GSmallMapControl());
			
			// lectura del archivo markers.xml con jQuery
			$.get('markers.xml',function(data) {  
				$(data).find('marker').each(function(){
					var lat    = $(this).attr('lat');  
					var lng    = $(this).attr('lng');  
					var html   = $(this).attr('name')+"<br />";
					html      += $(this).attr('msg')+"<br />";
					html      += $(this).attr('link');
					var point  = new GLatLng(lat,lng);  
					var marker = new GMarker(point);  

					map.addOverlay(marker);  

					GEvent.addListener(marker, "click", function() {  
						marker.openInfoWindowHtml(html);  
					});
       
				});

			});

			// en cada nueva marca aparecerá el formulario HTML
			GEvent.addListener(map, 'click', function(overlay, point){
				if(mark) {
					map.removeOverlay(mark);
				}
				if(point) {
					pointA = new GPoint(point.x, point.y);
					mark = new GMarker(pointA);
					map.addOverlay(mark);
					map.getCenter(point);
					var lat = point.y;
					var lng = point.x;
					var form = 
					"<form action=\"maps_form.php\" method=\"post\">"+
						"<input type=\"hidden\" name=\"lat\" value=\""+lat+"\" />"+
						"<input type=\"hidden\" name=\"lng\" value=\""+lng+"\" />"+
						"Name:<input type=\"text\" name=\"name\" value=\"\" /><br />"+
						"Msg:<input type=\"text\" name=\"msg\" value=\"\" /><br />"+
						"Link:<input type=\"text\" name=\"link\" value=\"\" /><br />"+
						"<input type=\"submit\" name=\"submit\" value=\"save\" />"+
					"</form>";
					map.openInfoWindowHtml(point,form);
				}
			});
		}
	}
});
</script>
</head>

<body>
<!-- obviamente el area de nuestro mapa -->
<div id="map" style="width:1000px;height:600px;"></div>
</body>
</html>

Una interesante forma de como agregar marcadores con estilo usando un formulario. 

Vía designing4u