in Article

Using Google Maps v3 with PHP to show US Congressional Districts and their legislative data

Google Maps has been one of the greatest technologies by Google that changed the way people view the digital earth. Every now and then Google keeps updating its map service introducing new innovative functionality. US Congressional Districts has been one of the most discussed subjects in recent developments. As more complex web applications and social networks are developed, more and more developers are getting interested to show US Congressional Districts on their websites.

In this tutorial I will tell you how you can harness the power of Google Maps Version 3 and Web Map Service (WMS) to draw congressional districts.

Things you require

Before you begin, you should have fair understanding of

  • Google Map Api
  • Web Services
  • A bit of PHP
  • JQuery

Step 1

Before you can use Google Maps, it’s required to register and get an api key. If you don’t have a Google account, register one. It’s free. To register for Google Maps Api, goto After you register you can activate your V3 api. Google will generate an api key for you. Copy that api key. We’ll need it shortly.

Step 2

Next open your project, and create a new a php file that will show the map. In case you are using Dreamweaver, it will automatically add some standard html tags. If not, you should write some html such as usual html, head and body tags.

Google recommends to use Html5 pattern for document type. So at the top of your file, add the following declaration.

<!DOCTYPE html>

This tells the client browser that the content served should follow Html5 document type.

Next we need to import our Google Map file from Google’s servers. To do that, just add the following script tag to head tag of your file.

<script type="text/javascript" src=" false"></script>

What this script tag does is that, it goes to Google’s  servers and loads the scripts necessary to render the map on your page. Make sure that you replace your_api_key with the api key that you copied in Step 1.

Next we need to write the code to render the map.

<script type="text/javascript">
// Initialize defaults. Either or both can be null.
var state = "<?php if(isset($_REQUEST['state'])) echo $_REQUEST['state']; else echo ''; ?>";
var district = <?php if(isset($_REQUEST['state'])) echo '0'; else echo '1'; ?>;
function createDistrictsOverlay(outlines_only, opacity, state, district) {
return { getTileUrl: function(coord, zoom){
                      return "" + coord.x + "," + coord.y + "," + zoom + "&LAYERS=cd-110" + (outlines_only ? "-outlines" : "") + (state ? ":" + state + (!district ? "%25" : "/cd/110/" + district): "") + "&FORMAT=image/png";
         tileSize: new google.maps.Size(256, 256),
         minZoom: 2,
         maxZoom: 28,
         opacity: opacity,
         isPng: true
var map;
function initialize() {
var myOptions = {
zoom: <?php if(isset($_REQUEST['state'])) echo '6'; else echo '4'; ?>,
center: new google.maps.LatLng(<?php if(isset($_REQUEST['lat'])): echo $_REQUEST['lat']; else: echo "38"; endif; ?>,<?php if(isset($_REQUEST['lng'])): echo $_REQUEST['lng']; else: echo "-96"; endif; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
overlayWMS = new google.maps.ImageMapType(createDistrictsOverlay(false, .2, state, district));
map.overlayMapTypes.insertAt(0, overlayWMS);
overlayWMS = new google.maps.ImageMapType(createDistrictsOverlay(true, .7, state, district));
map.overlayMapTypes.insertAt(0, overlayWMS);
google.maps.event.addListener(map, "click", function(pos){ loadAddress(,pos.latLng.lng());});

In this snippet, we first check to see if some request parameters for state and districts have been passed and accordingly initialize the variables ‘state’ and ‘district’. In case no state request parameter has been passed, it means that user has not selected any state. In this case the map should show federal congressional districts. Therefore we set ‘district’ variable to 1 to inform our WMS service (to be used soon)  that we wish to show the first congressional districts of all states. This effectively means that we wish to show federal congressional districts. For a value of 0, it shows all the congressional districts.

Next we create a general function to create the district overlay option. As you can see, we have set the getTileUrl variable to the function that points to the wms service at To this service, we pass the coordinates of the position and the layers. We have set layers variable to cd-110 to draw 110th Congressional Districts.

The next function initializes the map. In this case we center the map to the latitude and longitude where the user clicked. They are passed as the request parameters (to be used soon). In case the user has not clicked anywhere or not lat lng request parameters have been set, we just center the map to (38, -96), the coordinates of USA.

Next we initialize the map and insert a new ImageMapType created with our state and district options. The insert method of google.maps.overlayMapTypes is used to insert the overlay to the map. To create a bit darker lines, we just need to insert another ImageMapType with same values and different opacity.

To redraw the map with proper state and lat lng, we just add a click event to the map. This causes the map to refresh the page with current clicked coordinates.

Write a Comment