Created
July 23, 2014 15:00
-
-
Save nakaji/74861ab487b429f9618f to your computer and use it in GitHub Desktop.
GoogleMapでクリックされた位置を取得するサンプル ref: http://qiita.com/nakaji/items/83e698e283ba31cbb6a2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@{ | |
Layout = null; | |
} | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>クリックされた位置を取得する</title> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<style> | |
html, body, #map-canvas { | |
height: 500px; | |
width: 500px; | |
margin: 20px; | |
padding: 20px; | |
} | |
</style> | |
<script src="~/Scripts/jquery-1.10.2.js"></script> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> | |
<script> | |
$(function () { | |
google.maps.event.addDomListener(window, 'load', initialize); | |
function initialize() { | |
var mapOptions = { | |
zoom: 15, | |
center: new google.maps.LatLng(Number($("#latitude").val()), Number($("#longitude").val())) | |
}; | |
var map = new google.maps.Map($("#map-canvas")[0], mapOptions); | |
var marker = new google.maps.Marker({ | |
position: map.getCenter(), | |
map: map | |
}); | |
google.maps.event.addListener(map, 'click', function (e) { | |
var loc = e.latLng; | |
marker.setPosition(loc); | |
$("#latitude").val(loc.lat()); | |
$("#longitude").val(loc.lng()); | |
}); | |
} | |
}); | |
</script> | |
</head> | |
<body> | |
<input id="latitude" type="text" value="33.8391574" /> | |
<input id="longitude" type="text" value="132.76557520000006" /> | |
<div id="map-canvas"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment