Interactive Google Map!
Posted: Sun Nov 16, 2008 2:58 pm
So, I got bored, and I decided to make a google chart a fun app! All you have to do is type in area code and it will highlight it on the map and tell you the state it belongs to in a little menu on the top right! If you want to test it out you have to import the NANP database I have underneath my source
Enjoy!
This was exported in simple SQL format
Code: Select all
<?php
/**
* Interactive Google Map - US Map
*
* This is my second rendition of a google map application. This map dynamically
* highlights states on the google map as you enter associated area code. Nice
* AJAX feel to a very simple application. Go GOOGLE!
*
* @author - Bryan Moyles
* @email - bryan.moyles@teltechcorp
*/
class gmap {
private $_host = 'localhost';
private $_user = 'root';
private $_pass = '';
private $_database = 'gmap1';
private $_table = 'nanp';
// Start defining those colors!
public $mapBG = 'FFFFFF'; // background color
public $defColor = 'F5F5F5'; // default state color
public $maxColor = '3366FF'; // lit up state color
public $minColor = 'CCCCFF'; // won't be but is required
// END
public $invalidInput = 'Invalid Input!'; // Error message for invalid area code
public $pageTitle = 'Interactive Google Map'; // Actual page title
public $states; // Where the states array is held and accessed
public function __construct() {
mysql_connect($this->_host, $this->_user, $this->_pass)
or die('Could not connect to the database');
mysql_select_db($this->_database);
$statesQuery = mysql_query("SELECT * FROM `{$this->_table}` WHERE `country` = 'US'");
while($states = mysql_fetch_row($statesQuery))
$this->states[$states[0]] = $states[1];
}
}
$gmap = new gmap();
?>
<html>
<head>
<title>
<?= $gmap->pageTitle ?>
</title>
<style type="text/css">
body {
background-color : #EAEAEA;
font-family : sans-serif;
font-size : 18px;
}
#container {
background-color : #FFF;
border : 1px solid #CCC;
margin : 0px auto;
padding : 10px;
width : 800px;
}
.content {
padding : 5px;
}
input {
font-size : 28px;
text-align : center;
}
#stateScreen {
float : right;
width : 300px;
}
.title {
border-bottom : 1px solid #36F;
font-size : 24px;
}
</style>
<script type="text/javascript">
states = new Array();
<?php
foreach($gmap->states as $areacode => $state)
echo "states['$areacode'] = '$state';\n";
?>
var stateString = '';
var colorString = '';
selectedStates = new Array();
function checkArea() {
inputValue = document.getElementById('areacodeInput').value;
if(inputValue.length == 3) {
if((states[document.getElementById('areacodeInput').value] != undefined)
&& (states[document.getElementById('areacodeInput').value] != 'NA')) {
selectedStates.push(
'('+document.getElementById('areacodeInput').value+') - '
+ states[document.getElementById('areacodeInput').value]
+ '<br />'
);
selectedStatesOutput = selectedStates.toString();
selectedStatesOutput = selectedStatesOutput.replace(/,/g, "")
stateString = stateString+states[document.getElementById('areacodeInput').value];
colorString = colorString+'9';
document.getElementById('stateMap').src = 'http://chart.apis.google.com/chart?'
+ 'chco=<?= $gmap->defColor ?>,<?= $gmap->minColor ?>,<?= $gmap->maxColor ?>'
+ '&chd=s:' + colorString
+ '&chf=bg,s,<?= $gmap->mapBG ?>'
+ '&chtm=usa'
+ '&chld=' + stateString
+ '&chs=440x220'
+ '&cht=t';
} else {
alert('<?= htmlentities($gmap->invalidInput) ?>');
}
document.getElementById('areacodeInput').value = '';
document.getElementById('selectedStates').innerHTML = selectedStatesOutput;
}
}
</script>
</head>
<body>
<div id="container">
<div id="stateScreen" align="center">
<div class="title">Selected States</div>
<div id="selectedStates" class="content">None Selected</div>
</div>
<img id="stateMap" src="http://chart.apis.google.com/chart?chco=f5f5f5,365e24,13390a&chd=s:&chf=bg,s,FFF&chtm=usa&chld=&chs=440x220&cht=t" />
<br />
<br />
<div class="title">NANP Highlighter!</div>
<div class="content">
Enter an area code and it will light up on the map!
</div>
<br />
<br />
<div align="center">
<input id="areacodeInput" type="text" maxlength="3" size="3" onKeyup="checkArea()" />
<br />
Area code input
</div>
</div>
</body>
</html>
Code: Select all
-- phpMyAdmin SQL Dump
-- version 2.11.7
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Nov 16, 2008 at 03:56 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.6
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Database: `motc`
--
-- --------------------------------------------------------
--
-- Table structure for table `nanp`
--
CREATE TABLE IF NOT EXISTS `nanp` (
`npa` int(3) default NULL,
`state` varchar(2) default NULL,
`country` varchar(20) default NULL,
`status` varchar(5) default NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `nanp`
--
INSERT INTO `nanp` (`npa`, `state`, `country`, `status`) VALUES
(203, 'CT', 'US', 'Yes'),
(204, 'Ma', 'CANADA', 'Yes'),
(205, 'AL', 'US', 'Yes'),
(206, 'WA', 'US', 'Yes'),
(207, 'ME', 'US', 'Yes'),
(208, 'ID', 'US', 'Yes'),
(209, 'CA', 'US', 'Yes'),
(210, 'TX', 'US', 'Yes'),
(212, 'NY', 'US', 'Yes'),
(213, 'CA', 'US', 'Yes'),
(214, 'TX', 'US', 'Yes'),
(215, 'PA', 'US', 'Yes'),
(216, 'OH', 'US', 'Yes'),
(217, 'IL', 'US', 'Yes'),
(218, 'MN', 'US', 'Yes'),
(219, 'IN', 'US', 'Yes'),
(224, 'IL', 'US', 'Yes'),
(225, 'LA', 'US', 'Yes'),
(226, 'On', 'CANADA', 'Yes'),
(228, 'MS', 'US', 'Yes'),
(229, 'GA', 'US', 'Yes'),
(231, 'MI', 'US', 'Yes'),
(234, 'OH', 'US', 'Yes'),
(239, 'FL', 'US', 'Yes'),
(240, 'MD', 'US', 'Yes'),
(242, 'Ba', 'BAHAMAS', 'Yes'),
(246, 'Ba', 'BARBADOS', 'Yes'),
(248, 'MI', 'US', 'Yes'),
(250, 'Br', 'CANADA', 'Yes'),
(251, 'AL', 'US', 'Yes'),
(252, 'NC', 'US', 'Yes'),
(253, 'WA', 'US', 'Yes'),
(254, 'TX', 'US', 'Yes'),
(256, 'AL', 'US', 'Yes'),
(260, 'IN', 'US', 'Yes'),
(262, 'WI', 'US', 'Yes'),
(264, 'An', 'ANGUILLA', 'Yes'),
(267, 'PA', 'US', 'Yes'),
(268, 'An', 'ANTIGUA/BARBUDA', 'Yes'),
(269, 'MI', 'US', 'Yes'),
(270, 'KY', 'US', 'Yes'),
(276, 'VA', 'US', 'Yes'),
(281, 'TX', 'US', 'Yes'),
(284, 'Br', 'BRITISH VIRGIN ISLAN', 'Yes'),
(289, 'On', 'CANADA', 'Yes'),
(301, 'MD', 'US', 'Yes'),
(302, 'DE', 'US', 'Yes'),
(303, 'CO', 'US', 'Yes'),
(304, 'WV', 'US', 'Yes'),
(305, 'FL', 'US', 'Yes'),
(306, 'Sa', 'CANADA', 'Yes'),
(307, 'WY', 'US', 'Yes'),
(308, 'NE', 'US', 'Yes'),
(309, 'IL', 'US', 'Yes'),
(310, 'CA', 'US', 'Yes'),
(312, 'IL', 'US', 'Yes'),
(313, 'MI', 'US', 'Yes'),
(314, 'MO', 'US', 'Yes'),
(315, 'NY', 'US', 'Yes'),
(316, 'KS', 'US', 'Yes'),
(317, 'IN', 'US', 'Yes'),
(318, 'LA', 'US', 'Yes'),
(319, 'IA', 'US', 'Yes'),
(320, 'MN', 'US', 'Yes'),
(321, 'FL', 'US', 'Yes'),
(323, 'CA', 'US', 'Yes'),
(325, 'TX', 'US', 'Yes'),
(330, 'OH', 'US', 'Yes'),
(331, 'IL', 'US', 'Yes'),
(334, 'AL', 'US', 'Yes'),
(336, 'NC', 'US', 'Yes'),
(337, 'LA', 'US', 'Yes'),
(339, 'MA', 'US', 'Yes'),
(340, 'US', 'US', 'Yes'),
(345, 'Ca', 'CAYMAN ISLANDS', 'Yes'),
(347, 'NY', 'US', 'Yes'),
(351, 'MA', 'US', 'Yes'),
(352, 'FL', 'US', 'Yes'),
(360, 'WA', 'US', 'Yes'),
(361, 'TX', 'US', 'Yes'),
(386, 'FL', 'US', 'Yes'),
(401, 'RI', 'US', 'Yes'),
(402, 'NE', 'US', 'Yes'),
(403, 'Al', 'CANADA', 'Yes'),
(404, 'GA', 'US', 'Yes'),
(405, 'OK', 'US', 'Yes'),
(406, 'MT', 'US', 'Yes'),
(407, 'FL', 'US', 'Yes'),
(408, 'CA', 'US', 'Yes'),
(409, 'TX', 'US', 'Yes'),
(410, 'MD', 'US', 'Yes'),
(412, 'PA', 'US', 'Yes'),
(413, 'MA', 'US', 'Yes'),
(414, 'WI', 'US', 'Yes'),
(415, 'CA', 'US', 'Yes'),
(416, 'On', 'CANADA', 'Yes'),
(417, 'MO', 'US', 'Yes'),
(418, 'Qu', 'CANADA', 'Yes'),
(419, 'OH', 'US', 'Yes'),
(423, 'TN', 'US', 'Yes'),
(424, 'CA', 'US', 'Yes'),
(425, 'WA', 'US', 'Yes'),
(430, 'TX', 'US', 'Yes'),
(432, 'TX', 'US', 'Yes'),
(434, 'VA', 'US', 'Yes'),
(435, 'UT', 'US', 'Yes'),
(438, 'Qu', 'CANADA', 'Yes'),
(440, 'OH', 'US', 'Yes'),
(441, 'Be', 'BERMUDA', 'Yes'),
(443, 'MD', 'US', 'Yes'),
(450, 'Qu', 'CANADA', 'Yes'),
(456, 'NA', '', 'Yes'),
(469, 'TX', 'US', 'Yes'),
(473, 'Gr', 'GRENADA', 'Yes'),
(478, 'GA', 'US', 'Yes'),
(479, 'AR', 'US', 'Yes'),
(480, 'AZ', 'US', 'Yes'),
(484, 'PA', 'US', 'Yes'),
(500, 'NA', '', 'Yes'),
(501, 'AR', 'US', 'Yes'),
(502, 'KY', 'US', 'Yes'),
(503, 'OR', 'US', 'Yes'),
(504, 'LA', 'US', 'Yes'),
(505, 'NM', 'US', 'Yes'),
(506, 'Ne', 'CANADA', 'Yes'),
(507, 'MN', 'US', 'Yes'),
(508, 'MA', 'US', 'Yes'),
(509, 'WA', 'US', 'Yes'),
(510, 'CA', 'US', 'Yes'),
(512, 'TX', 'US', 'Yes'),
(513, 'OH', 'US', 'Yes'),
(514, 'Qu', 'CANADA', 'Yes'),
(515, 'IA', 'US', 'Yes'),
(516, 'NY', 'US', 'Yes'),
(517, 'MI', 'US', 'Yes'),
(518, 'NY', 'US', 'Yes'),
(519, 'On', 'CANADA', 'Yes'),
(520, 'AZ', 'US', 'Yes'),
(530, 'CA', 'US', 'Yes'),
(540, 'VA', 'US', 'Yes'),
(541, 'OR', 'US', 'Yes'),
(551, 'NJ', 'US', 'Yes'),
(559, 'CA', 'US', 'Yes'),
(561, 'FL', 'US', 'Yes'),
(562, 'CA', 'US', 'Yes'),
(563, 'IA', 'US', 'Yes'),
(567, 'OH', 'US', 'Yes'),
(570, 'PA', 'US', 'Yes'),
(571, 'VA', 'US', 'Yes'),
(573, 'MO', 'US', 'Yes'),
(574, 'IN', 'US', 'Yes'),
(575, 'NM', 'US', 'Yes'),
(580, 'OK', 'US', 'Yes'),
(585, 'NY', 'US', 'Yes'),
(586, 'MI', 'US', 'Yes'),
(600, 'Ca', 'CANADA', 'Yes'),
(601, 'MS', 'US', 'Yes'),
(602, 'AZ', 'US', 'Yes'),
(603, 'NH', 'US', 'Yes'),
(604, 'Br', 'CANADA', 'Yes'),
(605, 'SD', 'US', 'Yes'),
(606, 'KY', 'US', 'Yes'),
(607, 'NY', 'US', 'Yes'),
(608, 'WI', 'US', 'Yes'),
(609, 'NJ', 'US', 'Yes'),
(610, 'PA', 'US', 'Yes'),
(612, 'MN', 'US', 'Yes'),
(613, 'On', 'CANADA', 'Yes'),
(614, 'OH', 'US', 'Yes'),
(615, 'TN', 'US', 'Yes'),
(616, 'MI', 'US', 'Yes'),
(617, 'MA', 'US', 'Yes'),
(618, 'IL', 'US', 'Yes'),
(619, 'CA', 'US', 'Yes'),
(620, 'KS', 'US', 'Yes'),
(623, 'AZ', 'US', 'Yes'),
(626, 'CA', 'US', 'Yes'),
(630, 'IL', 'US', 'Yes'),
(631, 'NY', 'US', 'Yes'),
(636, 'MO', 'US', 'Yes'),
(641, 'IA', 'US', 'Yes'),
(646, 'NY', 'US', 'Yes'),
(647, 'On', 'CANADA', 'Yes'),
(649, 'Tu', 'TURKS & CAICOS ISLAN', 'Yes'),
(650, 'CA', 'US', 'Yes'),
(651, 'MN', 'US', 'Yes'),
(660, 'MO', 'US', 'Yes'),
(661, 'CA', 'US', 'Yes'),
(662, 'MS', 'US', 'Yes'),
(664, 'Mo', 'MONTSERRAT', 'Yes'),
(670, 'CN', 'US', 'Yes'),
(671, 'GU', 'US', 'Yes'),
(678, 'GA', 'US', 'Yes'),
(682, 'TX', 'US', 'Yes'),
(684, 'AS', 'US', 'Yes'),
(700, 'NA', '', 'Yes'),
(701, 'ND', 'US', 'Yes'),
(702, 'NV', 'US', 'Yes'),
(703, 'VA', 'US', 'Yes'),
(704, 'NC', 'US', 'Yes'),
(705, 'On', 'CANADA', 'Yes'),
(706, 'GA', 'US', 'Yes'),
(707, 'CA', 'US', 'Yes'),
(708, 'IL', 'US', 'Yes'),
(709, 'Ne', 'CANADA', 'Yes'),
(710, 'US', 'US', 'Yes'),
(712, 'IA', 'US', 'Yes'),
(713, 'TX', 'US', 'Yes'),
(714, 'CA', 'US', 'Yes'),
(715, 'WI', 'US', 'Yes'),
(716, 'NY', 'US', 'Yes'),
(717, 'PA', 'US', 'Yes'),
(718, 'NY', 'US', 'Yes'),
(719, 'CO', 'US', 'Yes'),
(720, 'CO', 'US', 'Yes'),
(724, 'PA', 'US', 'Yes'),
(727, 'FL', 'US', 'Yes'),
(731, 'TN', 'US', 'Yes'),
(732, 'NJ', 'US', 'Yes'),
(734, 'MI', 'US', 'Yes'),
(740, 'OH', 'US', 'Yes'),
(754, 'FL', 'US', 'Yes'),
(757, 'VA', 'US', 'Yes'),
(758, 'St', 'ST. LUCIA', 'Yes'),
(760, 'CA', 'US', 'Yes'),
(762, 'GA', 'US', 'Yes'),
(763, 'MN', 'US', 'Yes'),
(765, 'IN', 'US', 'Yes'),
(767, 'Do', 'DOMINICA', 'Yes'),
(769, 'MS', 'US', 'Yes'),
(770, 'GA', 'US', 'Yes'),
(772, 'FL', 'US', 'Yes'),
(773, 'IL', 'US', 'Yes'),
(774, 'MA', 'US', 'Yes'),
(775, 'NV', 'US', 'Yes'),
(778, 'Br', 'CANADA', 'Yes'),
(779, 'IL', 'US', 'Yes'),
(780, 'Al', 'CANADA', 'Yes'),
(781, 'MA', 'US', 'Yes'),
(784, 'St', 'ST. VINCENT & GRENAD', 'Yes'),
(785, 'KS', 'US', 'Yes'),
(786, 'FL', 'US', 'Yes'),
(787, 'Pu', 'US', 'Yes'),
(800, 'NA', '', 'Yes'),
(801, 'UT', 'US', 'Yes'),
(802, 'VT', 'US', 'Yes'),
(803, 'SC', 'US', 'Yes'),
(804, 'VA', 'US', 'Yes'),
(805, 'CA', 'US', 'Yes'),
(806, 'TX', 'US', 'Yes'),
(807, 'On', 'CANADA', 'Yes'),
(808, 'HI', 'US', 'Yes'),
(809, 'Do', 'DOMINICAN REPUBLIC', 'Yes'),
(810, 'MI', 'US', 'Yes'),
(812, 'IN', 'US', 'Yes'),
(813, 'FL', 'US', 'Yes'),
(814, 'PA', 'US', 'Yes'),
(815, 'IL', 'US', 'Yes'),
(816, 'MO', 'US', 'Yes'),
(817, 'TX', 'US', 'Yes'),
(818, 'CA', 'US', 'Yes'),
(819, 'Qu', 'CANADA', 'Yes'),
(828, 'NC', 'US', 'Yes'),
(829, 'Do', 'DOMINICAN REPUBLIC', 'Yes'),
(830, 'TX', 'US', 'Yes'),
(831, 'CA', 'US', 'Yes'),
(832, 'TX', 'US', 'Yes'),
(843, 'SC', 'US', 'Yes'),
(845, 'NY', 'US', 'Yes'),
(847, 'IL', 'US', 'Yes'),
(848, 'NJ', 'US', 'Yes'),
(850, 'FL', 'US', 'Yes'),
(856, 'NJ', 'US', 'Yes'),
(857, 'MA', 'US', 'Yes'),
(858, 'CA', 'US', 'Yes'),
(859, 'KY', 'US', 'Yes'),
(860, 'CT', 'US', 'Yes'),
(862, 'NJ', 'US', 'Yes'),
(863, 'FL', 'US', 'Yes'),
(864, 'SC', 'US', 'Yes'),
(865, 'TN', 'US', 'Yes'),
(866, 'NA', '', 'Yes'),
(867, 'Yu', 'CANADA', 'Yes'),
(868, 'Tr', 'TRINIDAD AND TOBAGO', 'Yes'),
(869, 'St', 'ST. KITTS AND NEVIS', 'Yes'),
(870, 'AR', 'US', 'Yes'),
(876, 'Ja', 'JAMAICA', 'Yes'),
(877, 'NA', '', 'Yes'),
(878, 'PA', 'US', 'Yes'),
(888, 'NA', '', 'Yes'),
(900, 'NA', '', 'Yes'),
(901, 'TN', 'US', 'Yes'),
(902, 'No', 'CANADA', 'Yes'),
(903, 'TX', 'US', 'Yes'),
(904, 'FL', 'US', 'Yes'),
(905, 'On', 'CANADA', 'Yes'),
(906, 'MI', 'US', 'Yes'),
(907, 'AK', 'US', 'Yes'),
(908, 'NJ', 'US', 'Yes'),
(909, 'CA', 'US', 'Yes'),
(910, 'NC', 'US', 'Yes'),
(912, 'GA', 'US', 'Yes'),
(913, 'KS', 'US', 'Yes'),
(914, 'NY', 'US', 'Yes'),
(915, 'TX', 'US', 'Yes'),
(916, 'CA', 'US', 'Yes'),
(917, 'NY', 'US', 'Yes'),
(918, 'OK', 'US', 'Yes'),
(919, 'NC', 'US', 'Yes'),
(920, 'WI', 'US', 'Yes'),
(925, 'CA', 'US', 'Yes'),
(928, 'AZ', 'US', 'Yes'),
(931, 'TN', 'US', 'Yes'),
(936, 'TX', 'US', 'Yes'),
(937, 'OH', 'US', 'Yes'),
(939, 'Pu', 'US', 'Yes'),
(940, 'TX', 'US', 'Yes'),
(941, 'FL', 'US', 'Yes'),
(947, 'MI', 'US', 'Yes'),
(949, 'CA', 'US', 'Yes'),
(951, 'CA', 'US', 'Yes'),
(952, 'MN', 'US', 'Yes'),
(954, 'FL', 'US', 'Yes'),
(956, 'TX', 'US', 'Yes'),
(970, 'CO', 'US', 'Yes'),
(971, 'OR', 'US', 'Yes'),
(972, 'TX', 'US', 'Yes'),
(973, 'NJ', 'US', 'Yes'),
(978, 'MA', 'US', 'Yes'),
(979, 'TX', 'US', 'Yes'),
(980, 'NC', 'US', 'Yes'),
(985, 'LA', 'US', 'Yes'),
(989, 'MI', 'US', 'Yes');