googlemapで座標と移動可能なマーカーを出す

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="上記住所入力">&nbsp;&nbsp;<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>

サンプルhttps://blog.tama-tama.net/test/map/index3.php

コメント

タイトルとURLをコピーしました