[Google Maps API v3] Update Form with Marker Position

Mon, 03 May 2010 09:31:06 -0700 

I've been struggling with this and thought I'd post since I'm going in
circles.  I'm modifying example code that allows the user to click to
add a marker which then provides the lat lon to the screen.  I'd like
the lat and lon to go to my form so I can submit / capture the
information.  I'm trying to place it into a hidden field and also
display it read-only on the form.

I'm sorry if this turns out to be a generic Javascript question but
I'm not sure where to go next.

Functioning example here:
http://www.william-map.com/20100416/1/map.htm

Here's the code (be kind, I'm a noob.)
John


<%@ page import="java.util.List"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="commandview.entity.*"%>
<%@ page import="java.io.IOException"%>


<%
String startLat = (String)request.getAttribute("startLat");
String startLon = (String)request.getAttribute("startLon");
Long geotagTimeStamp = (Long)request.getAttribute("geotagTimeStamp");
Long memberId = (Long)request.getAttribute("memberId");
Long deptId = (Long)request.getAttribute("deptId");

%>
<html>
<head>
<meta id="viewport" name="viewport" content="width=300; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>testIQ</title>
<link rel="stylesheet" href="stylesheets/main.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">

  var map;
  var marker;
  var overlay;

  function initialize() {

// figure out how to get variables into script passed to jsp
    var latlng = new google.maps.LatLng(40.88, -74.45);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
    });

    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);
  }



  function placeMarker(location) {

    if (marker != null) {
      marker.setMap(null);
    }

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

    var mapType        = map.mapTypes[map.getMapTypeId()];
    var mapPixel       =
mapType.projection.fromLatLngToPoint(location);
    var containerPixel =
overlay.projection.fromLatLngToContainerPixel(location);
    var divPixel       =
overlay.projection.fromLatLngToDivPixel(location);

        document.getElementById("infoLat").innerHTML = "" + location.lat() +
"";
        document.getElementById("infoLon").innerHTML = "" + location.lon()
+ "";

 }

</script>
</head>
<body onload="initialize()">

                <table>
                        <form id="geoForm" method="post" action="department?
action=geotagCreate">

                                <tr class="tall">
                                        <td class="ph_red wide 
medium">testIQ&trade;</td>
                                        <td class="ph_white small"><a 
href="department?
action=deptDisplay">Dept</a></td></tr>
                                <tr><td class="black small" colspan="2">GEOTAG: 
Create</td></
tr>
                                <tr><td class="tall medium yellow" 
colspan="2"><a
href="geotag">REFRESH</a></td></tr>

<!--                            ... same deal... need to get variables passed 
to this jsp from
servlet-->
<!--                            <% if (startLat == null || startLon == null) { 
%>-->
<!--                            -->
<!--                            <tr><td class="tall medium yellow" 
colspan="2">No GPS
Information Found</td></tr>-->
<!--                            -->
<!--                             <% } else { %>-->

                                <input type=hidden id=geotagmemberId value=<%= 
memberId %> ></
input>
                                <input type=hidden id=geotagdeptId value=<%= 
deptId %> ></input>
                                <input type=hidden id=geotagTimeStamp value=<%= 
geotagTimeStamp %>
></input>
                                <input type=hidden id=infoLat>
                                <input type=hidden id=infoLon>

                                <% } %>

                                <tr><td colspan='2'>
                                         <div id="map_canvas" 
style="width:280px; height:280px"></div>
                                </td></tr>

                                <tr class="nobottom left"><td colspan="2" 
class="gray
small">Latitude:
                                <div id="infoLat"></div></td></tr>
                                <tr class="nobottom left"><td colspan="2" 
class="gray
small">Longitude:
                                <div id="infoLon"></div></td></tr>

                                <tr><td class="tall medium green" colspan="2">
                                  <a href="#"
onclick="javascript:document.forms[0].submit();return false;">SUBMIT</
a></td></tr>

                        </form>
                </table>
        </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to