0
私は誰かが私を助けてくれるかどうか疑問に思います。GoogleマップクリックしてHTMLフォームフィールドを表示
私はマップに1つまたは複数のマーカーを追加できる次のJSコードを持っています。
(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);
google.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);
}
})();
これは、ユーザーがマーカーまたは自分が作成したマーカーと、このためのHTMLコードは以下のとおりであるカットダウンバージョンに関する詳細を追加することができますフォームの一部です：
<!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>
誰かがおそらく、私がフィールド上にマーカーが作成されるまでフィールドを隠す（この例では 'description'フィールド）と「submit」ボタンを押してから、送信ボタンを押すと、およびボタンは、次のマーカーが作成されるまで隠されます。
感謝
クリス
UPDATE
こんにちは、コードのための多くのおかげで。
私は何か信じられないほど愚かなここにいる必要がありますが、あなたが提案したコードを追加しましたが、動作していないようです。
私はにJavascriptのラインを変更した：私は間違ってください行ってきたところあなたはおそらくを教えてもらえ
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;
}
：
google.maps.event.addListener(map, 'click', function(event) {
$("#add").show(); $("#add").submit(function(event){$(this).hide(); return false;});
placeMarker(event.latLng);
とCSSに？
感謝
クリス
私はjQueryのを使用していますと指摘しました。 JavaScriptコードの前にページにjQueryを追加する必要があります。 –