Google Maps Panoramic
From NetBurner Wiki
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
- A network enabled NetBurner.
- A Google Maps API Key
- NetBurner's Eclipse IDE
[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.
