Google Map Click To Show HTML Form Fields
I wonder whether someone may be able to help me please.
I have the following JS code which allows the user to add a single or multiple markers to a map.
(function add() {
var map, geocoder;
window.onload = function() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
goo开发者_运维知识库gle.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
})();
This is part of a form which allows the user to add more details about the marker or markers that they have created and a cut down version the HTML code for this is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add</title>
<link rel="stylesheet" href="css/addfindsstyle.css" type="text/css" media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/addfinds.js"></script>
</head>
<body>
<form name="add" id="add">
<div>
<label for="address">
<p> </p>
<p align="left">
<label>
<div align="center">Location Name<br />
<input name="locationname" type="text" id="locationname" />
</div>
</label>
</p>
<label>Description
<input name="description" type="text" id="description" />
<input type="submit" name="Submit" value="Submit" />
</label>
</div>
</form>
<div id="map"></div>
</body>
</html>
Could someone perhaps tell me please how I may go about hiding the fields, (in this example the field 'description') and the 'submit' button until a marker is created on the map and then once the submit button is pressed the fields and button are hidden until the next marker is created.
Many thanks
Chris
UPDATE
Hi, many thanks for the code.
I must be something incredibly stupid here, but I've added the code you suggested, but it doesn't seem to work.
I've changed the Javascript line to :
google.maps.event.addListener(map, 'click', function(event) {
$("#add").show(); $("#add").submit(function(event){$(this).hide(); return false;});
placeMarker(event.latLng);
and the CSS to:
body {
font-family: Calibri;
font-size: 14px;
width: auto;
border-left-style: none;
border-bottom-style: none;
border-right-style: none;
border-top-style: none;
text-align: center;
border-top-color: #FFFFFF;
outline-style: none;
right: auto;
position: absolute;
left: auto;
top: auto;
bottom: auto;
visibility: visible;
}
form {
#add display: none;
margin-bottom: 10px;
clear: both;
font-size: 14px;
visibility: visible;
}
#map {
width: 795px;
height: 503px;
border: 1px solid black;
position: absolute;
left: 12px;
top: 215px;
visibility: visible;
}
Could you perhaps tell me where I've gone wrong please?
Many thanks
Chris
You can use CSS to hide the elements initially:
#add {
display: none;
}
Then use JavaScript (example uses jQuery for brevity) to show/hide the fields.
Inside
google.maps.event.addListener(map, 'click', function(event) {
}
Add:
$("#add").show();
$("#add").submit(function(event){$(this).hide(); return false;});
Here's a jsfiddle example (really rough though, no styling) http://jsfiddle.net/phKEt/
加载中,请稍侯......
精彩评论