In my example below, a Google Map of Africa loads. A few seconds
later a mashup from Google Base displays cars near Mountain View,
California.
I do NOT want the map of Africa to be loaded or displayed. It wastes
time and bandwidth. But if I remove it then I get JavaScript errors
because Google Base tries to access it...
How can I remove the map of Africa that is displayed while the page
loads?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Masher Demonstration</title>
<style type="text/css">
body {
font-family: arial, sans-serif;
background-color:#fff;
font-size: small;
margin: 24px 8px 8px;
color:#000;
}
#wrapper{
width:100%;
}
/* ########## PAGE LAYOUT ########## */
#header {
position: relative;
height:50px;
margin:0 0 11px;
}
#pagecontent{
padding-bottom:5em;
border-left:1px dotted silver;
margin:0 0 0 169px;
}
#footer{
height: 55px;
padding-top: 20px;
clear:both;
}
#sidenav {
float:left;
width:160px;
margin:0 ;
background:#fff;
padding:0;
left:0;
}
/* ########## END PAGE LAYOUT ########## */
/* ########## SIDE NAV ########## */
#sidenav ul{
padding:0;
margin:0 0 1em 0;
}
#sidenav ul li ul{
padding:0;
margin:0 0 1em .6em;
}
#sidenav ul li{
list-style:none;
padding:0;
margin:.4em 0 0 0;
}
#sidenav p {
margin: 0 .3em 0 0;
padding:1em 0 0 0;
}
#sidenav ul li a, #sidenav ul ul li a, #sidenav ul ul ul li a{
color: #0000cc;
display:block;
width:92%;
height:100%;
padding:0;
}
#sidenav ul li a:hover{
color: #0000cc;
}
#sidenav h1{
font-weight:bold;
font-size:100%;
color:#000;
position:relative;
background-color:#fff;
border:none;
margin:0;
padding:0 2px 0 2px;
width:100%;
left:-2px;
}
#sidenav .top{margin-top:0;}
.other{ /* little box for side nav */
border-top:thin dotted #bbb;
border-bottom:thin dotted #bbb;
margin:3em 0 3em 0;
padding: 0 0 10px 0;
}
.line{ /* dotted line for division */
border-top:thin dotted #bbb;
margin:1em 0 0 0;
padding:0;
height:5px;
}
/* Search box */
#sidenav div#search {
margin-top: 2em;
}
#sidenav div#search .header {
font-weight: bold;
font-size: 90%;
margin-bottom: 1px;
}
#sidenav div#search .button {
margin-top: 1px;
}
#sidenav div#search .input input {
width: 125px;
}
/* ########## END SIDE NAV ########## */
/* ########## OTHER ELEMENTS ########## */
#logo{ /* in header */
float:left;
width: 175px;
top:-5px;
left:0;
padding:0;
margin:0;
position:absolute;
}
#logo img{
border:none;
margin:0;
}
#doc_title{ /* in header */
font-size:large;
font-weight:bold;
border-top: 1px solid;
background-color: #e5ecf9;
border-color: #3366CC;
margin:5px 0 0 174px;
padding:1px 0 1px 3px;
}
#page_title{
font-size:large;
font-weight:bold;
background-color: #fff;
border: 0;
margin:10px 0 5px 10px;
padding-left:0;
border-bottom: none;
}
.sidebox{
width:20em;
margin: 20px 0 0 22px;
padding:0 0 1em 0;
border-left:thin dotted #bbb;
float:right;
clear:right;
position:relative;
background-color:#fff;
}
.sidebox h2 {
font-size:110%;
font-weight:bold;
background-color: #e5ecf9;
border-color: #3366CC;
margin: 0 5px 0 4%;
padding:.1em 3px .1em 5px;
border:none;
}
.sidebox p {
margin: 0 0 0 25px;
padding:1em 0 0 0;
}
#footerlogo{ /* in footer */
position: absolute;
width: 175px;
padding:0;
margin:0;
left:10px;
}
#copyright { /* in footer */
text-align: center;
margin:0px 0 0 175px;
padding-top:30px;
}
/* ########## END OTHER ELEMENTS ########## */
/* ########## HYPERLINKS ########## */
a{
color: #0000cc;
}
a:active {
color: #cc0000;
text-decoration:none;
}
a:visited {
color: #551a8b;
}
.backtotop{
float:right;
clear:both;
margin: 1.5em 0 1em 4em;
position:relative;
padding:0;
font-size:x-small;
}
.linkbox a{
font-size:100%;
font-weight:bold;
border:1px solid;
padding: 5px 10px 7px 10px;
background-color: #e5ecf9;
border-color: #3366CC;
}
.linkbox{
margin: 1em 25px 1em 25px;
padding: 5px 10px 7px 0;
}
.anchor, .anchor:hover, .anchor:active, .anchor:visited{
color:#000000;
}
/* ########## END HYPERLINKS ########## */
/* ########## FONT FORMATS ########## */
h1, h2, h3, h4, h5 {
font-weight:bold;
margin-bottom:0;
}
h2, h3, h4, h5 {
margin-left:25px;
}
h1 {
font-size:130%;
margin:2em 0 0 10px;
padding:0 3px 0 3px;
border-top: 1px solid;
background-color: #e5ecf9;
border-color: #3366CC;
}
h2 {
font-size:120%;
margin-top:1.5em;
border-bottom: 1px solid;
border-color: #3366CC;
}
h3 {
font-size:110%;
margin-top:.7em;
position:relative;
left:0;
top:.7em;
z-index:5; /*to avoid falling behind other elements due to lowered
position*/
}
h4 {
margin-top:.5em;
font-size:100%;
font-weight:bold;
position:relative;
left:0;
top:.8em;
z-index:5; /*to avoid falling behind other elements due to lowered
position*/
}
h5 {
margin-top:.4em;
font-size:100%;
font-weight:100;
font-style:italic;
text-decoration:underline;
position:relative;
left:0;
top:.8em;
z-index:5; /*to avoid falling behind other elements due to lowered
position*/
}
p {
margin: 1em 0 0 25px;
padding:0;
}
ol, ul, dl{
padding-top:.5em;
margin-top:0;
margin-bottom:0;
}
li ol, li ul{
padding:.1em 0 0 0;
margin:0;
}
li{
margin: .4em 0 0 1.5em;
padding:0;
}
dt{
font-weight:bold;
margin:.75em 0 0 25px;
padding:0;
}
dd{
margin: .4em 0 0 4em;
padding:0;
font-weight:normal;
}
ul li p, ol li p{
margin: 0;
padding:.4em 0 0 0;
font-weight:normal;
}
.listhead li{
font-weight:bold;
margin:.75em 0 0 1.5em;
}
.listhead li p{
font-weight:normal;
margin: 0;
}
ol.alpha{list-style:lower-alpha;}
ol.alphacap{list-style:upper-alpha;}
ol.roman{list-style:lower-roman;}
ol.romancap{list-style:upper-roman;}
.nolist{list-style: none;}
.nolist li{margin-left: 0;}
.new{
font-size:inherit;
font-weight:bold;
color:#FF0000;
text-decoration:none;
}
.trail{
list-style:none;
margin-left: 174px;
padding:3px 0 0 3px;
}
.trail li{
display:inline;
padding:0 0 0 0;
margin:0;
}
code{
font-family: "Courier New", Courier, monospace;
font-size: 100%;
}
.code li{
font-family: "Courier New", Courier, monospace;
font-size: 100%;
margin-top:.75em;
}
.code li p{
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
}
.alert {
border: 1px solid;
padding: .9em;
margin: 1em 0 1em 25px;
background-color: #e5ecf9;
border-color: #3366CC;
}
.alert p{padding:0; margin:0;}
.note {
padding:.2em .5em .2em .9em;
margin: 1em 0 0 25px;
background-color: #efefef;
border-top: #aaa 1px solid;
border-bottom: #aaa 1px solid;
}
.caution{
padding:.2em .5em .2em .9em;
margin: 1em 0 0 25px;
background-color: #efefef;
border-top: #ffcc33 1px solid;
border-bottom: #ffcc33 1px solid;
}
.warning{
padding:.2em .5em .2em .9em;
margin: 1em 0 0 25px;
background-color: #efefef;
border-top: #aa0033 1px solid;
border-bottom: #aa0033 1px solid;
}
.warning b, .warning em{
color:#aa0033;
}
ul li p.note, ul li p.warning, ul li p.caution,
ol li p.note, ol li p.warning, ol li p.caution{
margin: .8em 0 0 0;
padding:.2em .5em .2em .9em;
background-color: #efefef;
border-top: #ccc 1px solid;
}
.sidebox .note, .sidebox .caution, .sidebox .warning{
padding:.2em .5em .2em .7em;
margin: 1em 0 0 25px;
}
.notice {
padding:.5em;
margin: 1em 0 0 25px;
background-color: #efefef;
border-top: #fff;
}
.notice form{
padding:0;
margin:0;
}
form {
padding:0;
margin:2em 0 0 0;
}
pre {
background-color: #eee;
border: 1px solid #bbb;
color: #000000;
font-family: "Courier New", Courier, monospace;
font-size: 100%;
margin: 1em 0 0 25px;
padding: .9em;
text-align:left;
overflow: auto;
}
li pre{
margin: 1em 0 0 0;
padding: .9em;
}
blockquote {
text-align:justify;
padding:10px 20px 5px 20px;
margin:1em 90px 0 70px;
}
.sidebox blockquote {
padding:15px 20px 0 20px;
margin:5px 20px 5px 20px;
}
#date{
text-align:left;
margin: 3em 0 0 1.5em;
padding:0;
font-style:italic;
font-size:x-small;
}
/* ########## END FONT FORMATS ########## */
/* ########## TOC ########## */
ol.toc, div.toc ol{
margin:1.5em 0 0 25px;
padding:0;
list-style:none;
}
ol.toc li, div.toc ol li{
font-weight:bold;
margin:.5em 0 0 1.5em;
padding:0;
}
ol.toc li ol, div.toc ol li ol{
margin:0;
padding:0;
}
ol.toc li ol li, div.toc ol li ol li{
padding:0;
margin:.1em 0 0 1em;
font-weight:normal;
list-style:none;
}
table ol.toc{
margin-left:0;
}
/* ########## END TOC ########## */
/* ########## TABLES ########## */
table {
border: 1px solid;
border-color: #3366CC;
border-spacing:0;
margin: 1em 0 0 26px;
border-collapse:collapse;
clear:right;
}
th {
font-weight:bold;
text-align:left;
margin-left:3%;
border: 1px solid #3366CC;
text-align: left;
padding: 6px 6px 6px 12px;
background-color: #e5ecf9;
}
td {
border: 1px solid #3366CC;
background: #fff;
text-align:left;
margin-left:3%;
padding: 6px 6px 6px 12px;
vertical-align:top;
}
td.alt {
background: #eee;
}
.columns {
border: none;
margin-top:0;
margin-bottom:0;
margin-left:0;
/* margin-right omitted to avoid IE6 bug */
}
.columns td{
border: none;
padding:0 0 0 25px;
}
td p, td ul, td ol, td dl,
td h1, td h2, td h3, td h4, td h5 {
margin-left: 0;
}
/* ########## END TABLES ########## */
/* ######### (INDEX) UPDATES SECTION ########### */
table#updates {
border:none;
padding:0;
}
table#updates td {
border:none;
padding:0;
margin:0;
}
table#updates div.section {
border-top: 1px dotted silver;
margin:1em 0 0 0;
padding:5px 0 0 0;
}
table#updates h2 {
border:none;
margin:0 0 .5em 0;
padding:0;
}
#updates .title {
font-size:medium;
margin:0;
}
/* ------ blog feed section ------ */
#updates div.entry {
margin:0 0 1.5em 0;
}
#updates div.author {
color:#999;
margin:0 0 .5em 0;
}
#updates .subscribe a, #updates .subscribe a:visited {
float:right;
color:#BB4900;
text-decoration:none;
}
#pagecontent #updates .subscribe a img {
border:none;
margin:0;
padding:0;
vertical-align:middle;
}
#updates subscribe a span {
color:#BB4900;
text-decoration:underline;
}
/* ------ examples section ------ */
#updates #featuredsection {
padding:0 0 0 40px;
}
#updates .project {
margin-bottom:1.5em;
width:330px;
}
#updates .project .screenshot {
float:left;
margin:0 10px 0 0;
padding:0;
}
#pagecontent #updates .project .screenshot img {
border:1px solid;
width:130px;
height:108px;
margin:0;
}
#updates .info {
margin:0 0 0 140px;
padding:0;
}
#updates .project:after {
clear:both;
content:".";
display:block;
height:0pt;
visibility:hidden;
}
#updates p.snippet {
padding:0;
margin:0;
}
#updates p.apis {
padding:0;
margin:.5em 0 0 0;
}
#updates .info ul {
padding:0;
margin:0;
}
#updates .info li {
list-style:none;
padding:0 0 0 1em;
margin:0;
}
/* ######### SECONDARY NAV ######### */
#secondnav {
margin:20px 0 0 10px;
padding:0;
}
#secondnav table {
border-top:none;
border-left:none;
border-right:none;
border-bottom:solid 4px #C3D9FF;
margin:0;
padding:0;
}
#secondnav th {
background-color:#e5ecf9;
font-weight:bold;
margin:0;
padding:0;
text-align:center;
border:0;
border-collapse: collapse;
}
#secondnav td {
border:0;
border-collapse: collapse;
padding:0;
margin:0;
}
#secondnav a {
text-decoration:none;
color:#000;
}
#secondnav .tc1 {
background:transparent url(http://code.google.com/images/
corner_tl_sharp.gif) no-repeat scroll left top;
height:4px;
padding:0;
margin:0;
}
#secondnav .tcr {
background:transparent url(http://code.google.com/images/
corner_tr_sharp.gif) no-repeat scroll right top;
height:4px;
padding:0;
margin:0;
}
#secondnav .h_link {
padding:0 1em 2px;
}
/* ########## MISCELLANEOUS ########## */
img {
border:none;
margin:1em 0;
}
.button {
margin-top: 2px;
}
.input input {
width: 90%;
}
hr{
border: 1px solid;
border-color: #3366CC;
margin: 20px 10px 20px 10px;
}
#pagecontent img{
margin: 1em 0 0 25px;
}
/* a11y */
.hidden, .hidden *, #skipto, #skipto *,
#skipto a, #skipto a:hover, #skipto a:visited {
position:relative;
top: -4444px;
left: -4444px;
height: 1px;
width: 1px;
overflow: hidden;
z-index: 4444;
}
#skipto a:focus {
position:fixed;
top: 5px;
left: 5px;
height: auto;
width: auto;
background-color: white;
border: 2px solid #0000CC;
font-weight:bold;
padding: 5px;
}
/* ########## END MISCELLANEOUS ########## */
/* ######### PRINT PAGE STYLE ########### */
@media print{
h1, h2, h3, h4, h5, h6 { /*keep headings with the text that belongs
with them*/
page-break-after: avoid;
}
#sidenav, #footer { /* don't show page navigation */
visibility:hidden;
position:absolute;
}
#pagecontent{ /* nudge page content over to fill page */
float:left;
position:relative;
top:0;
left:-175px;
width:100%;
}
#doc_title{ /* add another border since bg-color doesn't show */
border-bottom:1px solid;
padding-bottom:2px;
}
pre {
overflow: visible;
}
.backtotop, #date{
visibility:hidden;
}
}
table.plain {
border: 1px solid;
border-color: #ccc;
border-spacing: 0;
margin: 0 0 0 0;
padding: 0px 0px 0px 0px;
border-collapse: collapse;
clear: right;
}
td {
border: 0px;
background: #fff;
text-align:left;
padding: 2px 2px 2px 2px;
vertical-align:middle;
}
td.snippet-title {
width:auto;
background-color: #99b3cc;
font-size:14px;
}
td.snippet-data {
vertical-align: top;
background-color: #e1e7fa;
font-size: 12px;
}
img {
width: 64px;
height: 64px;
}
</style>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAA-NjjZakzY5MKFK-
MdkfixBRfu3r7dH9FYihKTdE4J-EIk6ejuxRKNHpS-zxJaV5DOxQYxtLscHqrVQ"
type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var markers = [];
var markerHtmls = [];
var bounds = null;
/**
* This function is called when the page loads. It renders the map,
* instantiates the geocoder.
*/
function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_div"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(1,1), 3);
GEvent.addListener(map, "click", function(marker, point) {
for (var i = 0; i < markers.length; i++) {
if (marker == markers[i]) {
marker.openInfoWindowHtml(markerHtmls[i]);
}
}
});
geocoder = new GClientGeocoder();
bounds = new GLatLngBounds();
}
getSnippets();
}
/*********************
* Google Maps API *
*********************/
// This function centers the map and sets the zoom level based the lat/
long of the markers.
function centerAndZoomMap() {
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}
/**
* This function draws a marker on the map at the given address.
*/
function showAddress(address, title, alturl, imgLinks) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
var marker = new GMarker(point);
bounds.extend(point);
centerAndZoomMap();
//populates array
markers.push(marker);
map.addOverlay(marker);
var html = 'Zzzzzz<a href="' + alturl + '">' + title + '</a>';
if (imgLinks) {
html += "<br/>";
var imgIndex = 0;
while (imgIndex < 3) {
if (imgLinks[imgIndex]) {
html += '<a href="' + alturl + '"><img src="' + imgLinks
[imgIndex].$t + '" alt="Image" /></a>';
}
imgIndex++;
}
}
//populates array
markerHtmls.push(html);
}
});
}
// This function displays the appropriate HTML in the InfoWindow of a
marker.
function openInfoWindow(markerIndex) {
markers[markerIndex].openInfoWindowHtml(markerHtmls[markerIndex]);
}
// This function is called before each query to remove old markers
from the map.
function clearMarkers() {
map.clearOverlays();
bounds = new GLatLngBounds();
markers = [];
markerHtmls = [];
}
/**
* This function parses the JSON results to display vehicle
information and
* put a marker on the map for each car.
*/
function showSnippets(json) {
// get rid of the old search results
clearOldSnippets();
clearMarkers();
// create a table to list the results
var snippet_list = document.createElement("table");
snippet_list.style.margin = "0px 0px 0px 0px";
document.getElementById("snippets_div").appendChild(snippet_list);
// use the JSON results to populate the table with images and
vehicle information
for (var i = 0; i < json.feed.entry.length; ++i) {
var entry = json.feed.entry[i];
// Create the table data elements for displaying the information
var firstRow = snippet_list.insertRow(snippet_list.rows.length);
firstRow.style.border = "1px";
var imgCell = firstRow.insertCell(0);
imgCell.setAttribute("class", "snippet-data");
imgCell.setAttribute("className", "snippet-data");
imgCell.rowSpan = 3;
var titleCell = firstRow.insertCell(1);
titleCell.colSpan = 2;
titleCell.setAttribute("class", "snippet-title");
titleCell.setAttribute("className", "snippet-title");
var secondRow = snippet_list.insertRow(snippet_list.rows.length);
var priceCell = secondRow.insertCell(0);
priceCell.setAttribute("class", "snippet-data");
priceCell.setAttribute("className", "snippet-data");
var locationCell = secondRow.insertCell(1);
locationCell.setAttribute("class", "snippet-data");
locationCell.setAttribute("className", "snippet-data");
var thirdRow = snippet_list.insertRow(snippet_list.rows.length);
var yearCell = thirdRow.insertCell(0);
yearCell.setAttribute("class", "snippet-data");
yearCell.setAttribute("className", "snippet-data");
var colorCell = thirdRow.insertCell(1);
colorCell.setAttribute("class", "snippet-data");
colorCell.setAttribute("className", "snippet-data");
// get an image of the car
if (entry.g$image_link) {
var img = document.createElement("img");
img.src = entry.g$image_link[0].$t;
imgCell.appendChild(img);
}
// get the price and condition of the car
var price;
if (entry.g$price) {
var splitIdx = entry.g$price[0].$t.indexOf(".");
price = entry.g$price[0].$t.slice(0, splitIdx);
} else {
price = "Not listed";
}
var condition;
if (entry.g$condition) {
condition = entry.g$condition[0].$t;
} else {
condition = "";
}
priceCell.innerHTML = "$" + price + " " + condition;
// get the location of the car
var location;
if (entry.g$location) {
location = entry.g$location[0].$t;
} else {
location = "Location unknown";
}
locationCell.innerHTML = location;
// get the year the car was made
var year;
if (entry.g$year) {
year = "Year: " + entry.g$year[0].$t;
} else {
year = "Year: Unknown";
}
yearCell.innerHTML = year;
// get the color of the car
var color;
if (entry.g$color) {
color = "Color: " + entry.g$color[0].$t;
} else {
color = "Color: Unknown";
}
colorCell.innerHTML = color;
// add a link to the car seller's page to the snippet title
var linkCell = document.createElement("td");
firstRow.appendChild(linkCell);
var alturl;
for (var k = 0; k < entry.link.length; ++k) {
if (entry.link[k].rel == "alternate") {
alturl = entry.link[k].href;
break;
}
}
titleCell.innerHTML = "<a onclick=\"openInfoWindow(" + i + ")\">"
+ entry.title.$t + "</a>";
// get the location and put a marker on the map
if (entry.g$location) {
var loc = entry.g$location[0];
var txt = null;
if (loc) {
txt = document.createTextNode(entry.title.$t + " - " + loc.
$t);
showAddress(loc.$t, entry.title.$t, alturl, entry.g
$image_link);
} else {
txt = document.createTextNode(entry.title.$t);
}
}
}
}
/**
* This function queries the snippets feed for a JSON result and
* sets a callback to the showSnippets() function.
*/
function getSnippets() {
// Create a script element that references the snippets feed query
var url = document.getElementById('jsonURL');
if (url) {
var attributesElement = document.createElement("script");
attributesElement.setAttribute("id", "attributes");
attributesElement.setAttribute("src", url.value);
attributesElement.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(attributesElement);
}
}
/******************
* Housekeeping *
******************/
function clearOldSnippets() {
var div = document.getElementById("snippets_div");
if (div && div.firstChild) {
div.removeChild(div.firstChild);
}
}
//-->
</script>
</head>
<body onload="onLoad();" onunload="GUnload()">
<div id="map_div" style="width:100%; height:450px"></div>
<hr />
<div id="snippets_div" style="width:100%;"></div>
<input type="hidden" name="jsonURL" id="jsonURL" value="http://
www.google.com/base/feeds/snippets/?bq=[item%20type%3Avehicles][location%3A%40%221600%20Amphitheatre%20Parkway%2C%20Mountain%20View%2C%20CA.%22%20%2B%203mi]&alt=json-in-script&callback=showSnippets&key=___KEY___&start-index=1"
/>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Base Data API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Base-data-API?hl=en
-~----------~----~----~----~------~----~------~--~---
