google-map-api/save-location.html at master · arsarawut/google-map-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> Hello World Google Map API LV3 </title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js" ></script>
<script language="JavaScript">

function saveLatLng(){

var lat = $("#lat").val();
var lng = $("#lng").val();
var location_name = $("#location_name").val();

$.ajax({
method : "POST",
url: "insert.php",
data: { lat:lat, lng:lng, location_name:location_name }
}).done(function(text){

alert(text);

});

}

	function setupMap() {
	var myOptions = {
	  zoom: 8,
	  center: new google.maps.LatLng(16.024695711685314, 103.13690185546875),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById('map_canvas'),
		myOptions);

	var marker = new google.maps.Marker({
	map:map,
	position: new google.maps.LatLng(15.000682,103.728207),
	draggable: true
	});


	var infowindow = new google.maps.InfoWindow({
	map:map,
	content: "hello",
	position:  new google.maps.LatLng(15.000682,103.728207)
	});


google.maps.event.addListener(map,'click',function(event){

var html = '';
html += 'lat : <input type="text" id="lat" value="'+event.latLng.lat()+'" /><br/>';
html += 'lng : <input type="text" id="lng" value="'+event.latLng.lng()+'" /><br/>';
html += 'location name : <input type="text" id="location_name" value="" /><br/>';
html += '<input type="button" value="Save" onclick="saveLatLng()" />';
infowindow.open(map,marker);
infowindow.setContent(html);
infowindow.setPosition(event.latLng);

marker.setPosition(event.latLng);

});


	}

</script>
 </head>

 <body onload="setupMap()">

<div id="map_canvas" style="width:800px;height:450px;"></div>

 </body>
</html>