박정인 / opensource

Go to a project
Toggle navigation Toggle navigation pinning
박정인
ca5dacc1 1 parent f69a03c5

lastpage

Inline Side-by-side
Showing 2 changed files with 158 additions and 0 deletions
<html>
<meta charset="utf-8">
<head>
<body>
<form href='/second/what'><div><label>구 입력: </label><input type="text" ,="" name="gu"></div>
<div><label>도로명 입력: </label><input type="text" ,="" name="dong"></div>
</form>
<a href="/second/what"><button>두번째 페이지로 이동</button></a>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
</body>
<script>
var map;
var Seoul = new google.maps.LatLng(37.551920, 126.994615);
// Add a Home control that returns the user to Suwon
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to Seoul';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
// Setup click-event listener: simply set the map to Suwon
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(Seoul, 37.551920, 127.994615)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: Seoul,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
$("button#searchButton").click(function(){
var name = $("input").val();
location.href = "http://127.0.0.1:8888/test/" + name;
})
});
</script>
</head>
<body>
<div id="googleMap" style="width:700px;height:500px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.551920, lng: 127.994615}
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 37.492079, lng: 127.024926},
{lat: 37.48358141, lng: 127.0125098},
{lat: 37.483645, lng: 127.012494},
{lat: 37.49594696, lng: 127.015339},
{lat: 37.50270072, lng: 127.0221703},
{lat: 37.502751, lng: 127.022102},
{lat: 37.48173288, lng: 127.0246724},
{lat: 37.50367955, lng: 127.022592},
{lat: 37.50199103, lng: 127.0238564},
{lat: 37.50099814, lng: 127.0241736},
{lat: 37.49886109, lng: 127.024354},
{lat: 37.50005877, lng: 127.024459},
{lat: 37.50165417, lng: 127.0247576},
{lat: 37.50165807, lng: 127.0251038},
{lat: 37.49943645, lng: 127.0264351},
{lat: 37.4838703, lng: 127.0167514},
{lat: 37.4850395, lng: 127.0174372},
{lat: 37.4849552, lng: 127.0175475},
{lat: 37.484, lng: 127.033},
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxV4OE9LULUMIYriVBLqR23YNGsZ_YgkI&callback=initMap">
</script>
</body>
</html>