Page 1 of 1

Interactive Google Map!

Posted: Sun Nov 16, 2008 2:58 pm
by bmoyles0117
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!

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>
 
This was exported in simple SQL format

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');
 

Re: Interactive Google Map!

Posted: Sun Nov 16, 2008 3:31 pm
by bmoyles0117
Just put up a live demo :)

http://outrundesigns.com/gmap/