googlemap apiを使って座標とマーカー(動かせる)を出すどうしたものか
APIkeyは各位用意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>googlemaptest</title>
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"></script>
</head>
<body>
<div class="normal_box2">
<div class="normal_box2_layout2">
<ul>
<li>所在地</li>
<li>
<input type="text" class="text" id="country" name="anken2_address1" value="東京都" placeholder="都道府県" />
<input type="text" class="text" id="address5" name="anken2_address2" value="杉並区" placeholder="以下住所" />
</li>
</ul>
</div>
</div>
<div class="normal_box2">
<div class="normal_box2_layout2">
<ul>
<li>所在地</li>
<li><input type="text"class="text" name="" value="" id="address" class="layout_6_6"></li>
</ul>
</div>
</div>
<div class="normal_box2">
<div class="normal_box2_layout">
<ul>
<li>緯度</li>
<li><input type="text"class="text" name="anken2_address4" id="lat" value="" /></li>
</ul>
</div>
<div class="normal_box2_layout">
<ul>
<li>経度</li>
<li><input type="text"class="text" name="anken2_address5" id="lng" value="" /></li>
</ul>
</div>
</div>
<div class="normal_box2_2"><input type="button" id="btn_getvalues" value="上記住所入力"> <button id="getad">住所から座標取得</button></div>
<div class="normal_box2_3"><div id="map_canvas"></div></div>
<!--google APIキー-->
<script src="https://maps.googleapis.com/maps/api/js?key=**********ここに自分のAPIkey**********"></script>
<!-- MAPです -->
<script type="text/javascript">
$(document).ready(function()
{
var mapdiv = document.getElementById('map_canvas');
var geocoder = new google.maps.Geocoder();
var org_lat = $("#lat").val();
var org_lng = $("#lng").val();
var point = new google.maps.LatLng(org_lat, org_lng);
var myOptions = {
zoom: 17,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map(mapdiv, myOptions);
var marker = new google.maps.Marker({
position: point,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
var p = marker.position;
$("#lat").val(p.lat());
$("#lng").val(p.lng());
});
$("#getad").click(function() {
var sad = $("#address").val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': sad}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
var p = marker.position;
$("#lat").val(p.lat());
$("#lng").val(p.lng());
} else {
alert("住所から場所を特定できませんでした。確認してください");
}
});
return false;
});
});
</script>
<style type="text/css">
#map_canvas {
width: 100%;
height: 300px;
}
</style>
<script type="text/javascript">
$(function() {
$("#btn_getvalues").click(function() {
$("#val_country").html($("#country").val() + " => " + $("#country option:selected").html());
jQuery("#address").val(jQuery('#country').val() + jQuery('#address5').val());
return false;
});
});
</script>
</p>
</body>
</html>
コメント