Google Maps Panoramic

From NetBurner Wiki

Jump to: navigation, search

The Google Maps Panoramic Project is an example of how to use your NetBurner module to interface with the Google Maps API. This Project also exemplifies the use to cascade style sheets (CSS).

Contents

[edit] Project Description

This project uses the Google Maps API to show a map of San Diego. Clicking on any street with Google Street View will pop up a panoramic shot of that street in the side window. The HTML page displayed by the NetBurner module is designed using CSS. This enables you to create a page that looks the same across multiple browsers and display formats.

[edit] Requirements

[edit] Code Detail

To display your Google Map on the NetBurner, you must first ensure that you are using a valid key. Then, to initialize your google maps API script, specify the key as follows.

    <script src="http://maps.google.com/maps?file=api&v=2&key=(YOUR VALID KEY)" type="text/javascript">

Within the script tags, you will initialize the Google map. We call the initialize function, center the map on San Diego, and add controls to the map. We also overlay the Google street view on top of the map, so that we know which streets are clickable to bring up the panoramic view.

    function initialize() {
      if (GBrowserIsCompatible()) {

        var myPano = new GStreetviewPanorama(document.getElementById("pano"));
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(32.715648,-117.163718), 14);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        svOverlay = new GStreetviewOverlay();
        map.addOverlay(svOverlay);
        GEvent.addListener(map,"click", function(overlay,latlng) {
          myPano.setLocationAndPOV(latlng);
        });
       }
    }

To format the HTML page, we use CSS. In the following code we set the area for the map section of the css frame. This sets our width and height and instructs the page to slot the canvas area as furthest left area it will fit. We also set the background color.

    #map_canvas {
        width:350px;
	height:350px
	padding:5px;
	float:left;
	background:#aaa;
    }

Besides hosting the HTML page, the NetBurner is doing very little. In main.cpp, we simply start the HTTP server, and hold in a loop that forever delays.

    StartHTTP();
    iprintf("Application started\n");
    while (1) {
        OSTimeDly(20);
    }

[edit] Source Zip

This file can be Imported into NBEclipse. It will not work correctly until you specify your Google Maps API Key in index.htm.

ZipICO.PNG GmapsPano Project File Info_circle.png

Personal tools