박정인 / 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
1 +
2 +
3 +<html>
4 +<meta charset="utf-8">
5 +<head>
6 + <body>
7 + <form href='/second/what'><div><label>구 입력: </label><input type="text" ,="" name="gu"></div>
8 + <div><label>도로명 입력: </label><input type="text" ,="" name="dong"></div>
9 + </form>
10 + <a href="/second/what"><button>두번째 페이지로 이동</button></a>
11 +
12 +
13 +
14 +<script
15 +src="http://maps.googleapis.com/maps/api/js">
16 +</script>
17 +
18 +
19 +</body>
20 +<script>
21 +
22 +var map;
23 +var Seoul = new google.maps.LatLng(37.551920, 126.994615);
24 +
25 +// Add a Home control that returns the user to Suwon
26 +function HomeControl(controlDiv, map) {
27 + controlDiv.style.padding = '5px';
28 + var controlUI = document.createElement('div');
29 + controlUI.style.backgroundColor = 'yellow';
30 + controlUI.style.border='1px solid';
31 + controlUI.style.cursor = 'pointer';
32 + controlUI.style.textAlign = 'center';
33 + controlUI.title = 'Set map to Seoul';
34 + controlDiv.appendChild(controlUI);
35 + var controlText = document.createElement('div');
36 + controlText.style.fontFamily='Arial,sans-serif';
37 + controlText.style.fontSize='12px';
38 + controlText.style.paddingLeft = '4px';
39 + controlText.style.paddingRight = '4px';
40 + controlText.innerHTML = '<b>Home<b>'
41 + controlUI.appendChild(controlText);
42 +
43 + // Setup click-event listener: simply set the map to Suwon
44 + google.maps.event.addDomListener(controlUI, 'click', function() {
45 + map.setCenter(Seoul, 37.551920, 127.994615)
46 + });
47 +}
48 +
49 +function initialize() {
50 + var mapDiv = document.getElementById('googleMap');
51 + var myOptions = {
52 + zoom: 12,
53 + center: Seoul,
54 + mapTypeId: google.maps.MapTypeId.ROADMAP
55 + }
56 + map = new google.maps.Map(mapDiv, myOptions);
57 + // Create a DIV to hold the control and call HomeControl()
58 + var homeControlDiv = document.createElement('div');
59 + var homeControl = new HomeControl(homeControlDiv, map);
60 +// homeControlDiv.index = 1;
61 + map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
62 +}
63 +
64 +google.maps.event.addDomListener(window, 'load', initialize);
65 +
66 + $(document).ready(function(){
67 + $("button#searchButton").click(function(){
68 + var name = $("input").val();
69 + location.href = "http://127.0.0.1:8888/test/" + name;
70 + })
71 + });
72 +
73 +</script>
74 +</head>
75 +
76 +<body>
77 +<div id="googleMap" style="width:700px;height:500px;"></div>
78 +</body>
79 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5 + <meta charset="utf-8">
6 + <title>Marker Clustering</title>
7 + <style>
8 + /* Always set the map height explicitly to define the size of the div
9 + * element that contains the map. */
10 + #map {
11 + height: 100%;
12 + }
13 + /* Optional: Makes the sample page fill the window. */
14 + html, body {
15 + height: 100%;
16 + margin: 0;
17 + padding: 0;
18 + }
19 + </style>
20 + </head>
21 + <body>
22 + <div id="map"></div>
23 + <script>
24 +
25 + function initMap() {
26 +
27 + var map = new google.maps.Map(document.getElementById('map'), {
28 + zoom: 13,
29 + center: {lat: 37.551920, lng: 127.994615}
30 + });
31 +
32 + // Create an array of alphabetical characters used to label the markers.
33 + var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
34 +
35 + // Add some markers to the map.
36 + // Note: The code uses the JavaScript Array.prototype.map() method to
37 + // create an array of markers based on a given "locations" array.
38 + // The map() method here has nothing to do with the Google Maps API.
39 + var markers = locations.map(function(location, i) {
40 + return new google.maps.Marker({
41 + position: location,
42 + label: labels[i % labels.length]
43 + });
44 + });
45 +
46 + // Add a marker clusterer to manage the markers.
47 + var markerCluster = new MarkerClusterer(map, markers,
48 + {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
49 + }
50 + var locations = [
51 + {lat: 37.492079, lng: 127.024926},
52 + {lat: 37.48358141, lng: 127.0125098},
53 + {lat: 37.483645, lng: 127.012494},
54 + {lat: 37.49594696, lng: 127.015339},
55 + {lat: 37.50270072, lng: 127.0221703},
56 + {lat: 37.502751, lng: 127.022102},
57 + {lat: 37.48173288, lng: 127.0246724},
58 + {lat: 37.50367955, lng: 127.022592},
59 + {lat: 37.50199103, lng: 127.0238564},
60 + {lat: 37.50099814, lng: 127.0241736},
61 + {lat: 37.49886109, lng: 127.024354},
62 + {lat: 37.50005877, lng: 127.024459},
63 + {lat: 37.50165417, lng: 127.0247576},
64 + {lat: 37.50165807, lng: 127.0251038},
65 + {lat: 37.49943645, lng: 127.0264351},
66 + {lat: 37.4838703, lng: 127.0167514},
67 + {lat: 37.4850395, lng: 127.0174372},
68 + {lat: 37.4849552, lng: 127.0175475},
69 + {lat: 37.484, lng: 127.033},
70 +
71 + ]
72 + </script>
73 + <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
74 + </script>
75 + <script async defer
76 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxV4OE9LULUMIYriVBLqR23YNGsZ_YgkI&callback=initMap">
77 + </script>
78 + </body>
79 +</html>