Skip to content

Instantly share code, notes, and snippets.

@coolniikou
Created June 10, 2011 18:42
Show Gist options
  • Select an option

  • Save coolniikou/1019473 to your computer and use it in GitHub Desktop.

Select an option

Save coolniikou/1019473 to your computer and use it in GitHub Desktop.
#!/usr/env/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw( fatalsToBrowser );
use DBI;
my $q = CGI->new;
my $database = 'gmappoint.db';
my $data_source = qq{dbi:SQLite:dbname=$database};
my $dbh = DBI->connect(
$data_source,
undef,
undef,
{
RaiseError => 1,
PrintError => 0,
AutoCommit => 1,
}
);
my $statement = qq{ DELETE FROM mypoint };
my $sth = $dbh->prepare($statement) or die $dbh->errstr;
my $rv = $sth->execute or die $sth->errstr;
$dbh->disconnect;
print $q->header;
print $rv;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Add Point Google Map</title>
<style type="text/css">
html { overflow: hidden; }
html, body { margin: 0; padding: 0; height: 100%; }
div#map-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div#map-input { position: absolute; top: 7px; left: 100px; overflow: auto; z-index: 999; padding: 5px; background-color: #FFF; }
div#info { position: absolute; top: 50px; left: 100px; overflow: auto; z-index: 999; padding: 5px; background-color: #FFF; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("maps", "3", {other_params:"sensor=false"});</script>
<script type="text/javascript">google.load("jquery", "1.6.1");</script>
<script type="text/javascript">
var geocoder, map, marker, infoWindow, route = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(35.710058, 139.810718);
var mapDiv = document.getElementById('map-canvas');
var myOptions = {
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
google.maps.event.addListener(map, 'click', function(e) {
marker = new google.maps.Marker({
position: e.latLng,
map: map
});
route.push(e.latLng);
if(infoWindow) infoWindow.close();
infoWindow = new google.maps.InfoWindow();
codelatLng(e.latLng);
infoWindow.open(map,marker);
map.setCenter(e.latLng);
var roadPath = new google.maps.Polyline({
path: route,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 4
});
roadPath.setMap(map);
});
};
function codelatLng(obj) {
if (geocoder) {
geocoder.geocode({
'latLng': obj
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
savePoint(results[0]);
} else {
alert('Ooops! Geocode was not successful for the following reason: ' + status);
}
});
}
};
function savePoint(res) {
var url = './cgi/savepoint.cgi';
var data = {
address: res.formatted_address,
lat: res.geometry.location.lat(),
lng: res.geometry.location.lng()
};
$.post( url, data, function(json){
if(json) {
var conts = 'success <br /> ' + data.address + '<br />' + data.lat + ' : ' + data.lng;
if(infoWindow) infoWindow.setContent(conts);
}
});
};
function deletedata() {
var url = './cgi/deletedata.cgi';
$.get( url, function(json){
if(json) alert('delete数 :'+json);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-input">
<input id="address" type="textbox" value='東京タワー'/>
<input id="button" type="button" onclick="codeAddress()" value='submit'/><br/>
<input id="button" type="button" onclick="deletedata()" value='deleteAll'/>
<a href="./gmap_load_json.html">loadPoint</a>
</div>
<div id="info"></div>
<div id="map-canvas"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Load JSON Google Map</title>
<style type="text/css">
html { overflow: hidden; }
html, body { margin: 0; padding: 0; height: 100%; }
div#map-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div#map-input { position: absolute; top: 7px; left: 100px; overflow: auto; z-index: 999; padding: 5px; background-color: #FFF; }
div#info { position: absolute; top: 50px; left: 100px; overflow: auto; z-index: 999; padding: 5px; background-color: #FFF; }
</style>
<script type="text/javascript"
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("maps", "3", { other_params:"sensor=false"});</script>
<script type="text/javascript">google.load("jquery", "1.6.1");</script>
<script type="text/javascript">
function initialize() {
var map, infoWindow, url = './cgi/gmap_loadpoint.cgi?callback=?';
$.getJSON(url, function(json) {
var i, j = json.length, route=[];
var latlng = (json[0])
? new google.maps.LatLng(json[0].lat, json[0].lng)
: new google.maps.LatLng(35.6587039, 139.74540809999996);
var mapDiv = document.getElementById('map-canvas');
var myOptions = {
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
infoWindow = new google.maps.InfoWindow;
for (i = 0; i < j; i++) {
var address = json[i].address,
lat = json[i].lat,
lng = json[i].lng;
var pos = new google.maps.LatLng(lat, lng);
route.push(pos);
var marker = new google.maps.Marker({
map: map,
position: pos
});
html = '<br />' + address + '<br />' + lat + ' : ' + lng;
bindInfoWindow(marker, map, infoWindow, html);
};
bindroutePath(route,map);
});
};
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
};
function bindroutePath(route, map) {
var roadPath = new google.maps.Polyline({
path: route,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 4
});
roadPath.setMap(map);
};
function deletedata() {
var url = './cgi/deletedata.cgi';
$.get( url, function(json){
if(json) alert(json);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-input">
<input id="address" type="textbox" value='東京タワー'/>
<input id="button" type="button" onclick="codeAddress()" value='submit'/><br/>
<input id="button" type="button" onclick="deletedata()" value='deleteAll'/>
<a href="./gmap_add_point.html">add_point</a>
</div>
<div id="info"></div>
<div id="map-canvas"></div>
</body>
</html>
#!/usr/env/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw( fatalsToBrowser );
use DBI;
use JSON;
my $q = CGI->new;
my $callback = undef;
$callback = $q->param("callback") if defined $q->param('callback');
my $address = $q->param('address');
my $lat = $q->param('lat');
my $lng = $q->param('lng');
my $database = 'gmappoint.db';
my $data_source = qq{dbi:SQLite:dbname=$database};
my $dbh = DBI->connect(
$data_source,
undef,
undef,
{
RaiseError => 1,
PrintError => 0,
AutoCommit => 1,
sqlite_unicode => 1,
}
);
my $statement = qq{ SELECT * FROM mypoint };
my $sth = $dbh->prepare($statement) or die $dbh->errstr;
$sth->execute() or die $sth->errstr;
my $data = $sth->fetchall_arrayref(+{});
my $json = encode_json($data);
$sth->finish;
$dbh->disconnect;
print $q->header(
-type => 'application/json',
-charset => 'utf-8'
);
print "$callback($json)";
#!/usr/env/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw( fatalsToBrowser );
use DBI;
my $q = CGI->new;
my $address = $q->param('address');
my $lat = $q->param('lat');
my $lng = $q->param('lng');
my $database = 'gmappoint.db';
my $data_source = qq{dbi:SQLite:dbname=$database};
my $dbh = DBI->connect(
$data_source,
undef,
undef,
{
RaiseError => 1,
PrintError => 0,
AutoCommit => 1,
}
);
my $statement = qq{ INSERT into mypoint(address, lat, lng) values(?, ?, ?) };
my $sth = $dbh->prepare($statement) or die $dbh->errstr;
my $rv = $sth->execute($address, $lat, $lng) or die $sth->errstr;
$dbh->disconnect;
print $q->header;
print $rv;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment