• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 620
  • Last Modified:

Javascript function not initializing Google API

Hello,

I have a function called initializePoint that is working properly and I am trying to have a similar function called initializeStreet run and display in a div called Pano.  initializeStreet is not displaying properly however when I click on the tab info box.  Can somebody take a peek at my javascript and tell me if I am making some sort of glaring newbie error?  I am attaching .js file below.

You can also click on a listing to the right and then select the Street View tab to see the example here:
http://progresstechlabs.com/gmaps/integrate/index.php
var map;
var centerLatitude = 26.589450;
var centerLongitude = -81.819848;
var startZoom = 13;
var deselectCurrent = function() {};
var myPano;
    
function initializeStreet(pointData) {
      var fenwayPark = new GLatLng(pointData.latitude, pointData.longitude);
      panoramaOptions = { latlng:fenwayPark };
      myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
      GEvent.addListener(myPano, "error", handleNoFlash);
    }
    
function handleNoFlash(errorCode) {
      if (errorCode == FLASH_UNAVAILABLE) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
      }
    } 
 
function initializePoint(pointData) {
	var point = new GLatLng(pointData.latitude, pointData.longitude);
	var marker = new GMarker(point);
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
	var visible = false;
 
	listItemLink.href = "#";
	listItemLink.innerHTML = '<img width=90 border=1 height=68 align=right src=http://www.retsfl.com/rets_images/'+pointData.mls+'.jpg>'+'<strong>MLS #:' + pointData.mls + '</strong><BR>Price: $' + pointData.price + '<BR>Bedrooms: ' + pointData.bedrooms + '/ Baths: ' + pointData.baths + '<BR>Sq. Ft: ' + pointData.sqft ;
	
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		deselectCurrent = function() { listItem.className = ''; }
		var infoTabs = [
		new GInfoWindowTab("Listing", '<img width=300 border=1 height=227 align=right src=http://www.retsfl.com/rets_images/'+pointData.mls+'.jpg>'+'<strong>MLS #:' + pointData.mls + '</strong><BR>Price: $' + pointData.price + '<BR>Bedrooms: ' + pointData.bedrooms + '/ Baths: ' + pointData.baths + '<BR>Sq. Ft: ' + pointData.sqft + '<BR><BR><span style="font: 10px Helvetica, sans-serif;">Address:<BR>' + pointData.streetfull ),
		new GInfoWindowTab("More Info", "Data"),
		new GInfoWindowTab("Street View", '<div name="pano" id="pano" style="width: 300px; height: 227px"></div>'),
		new GInfoWindowTab("Agent Info", '<strong>Agent/Office:</strong><BR><li>' + pointData.agentfirstname + ' ' + pointData.agentlastname + ', ' + pointData.office + '<br><strong><font color=red><h4>Are you ready to take a closer look?</h4></font>Fill out the form below to email the agent immediately:<BR><label><input name="Name" type="text" id="Name" value="Name" /></label><br /><label><input name="Phone" type="text" id="Phone" value="Phone" /></label><br /><label><input name="Email" type="text" id="Email" value="Email" /></label><br /><textarea name="textarea" id="textarea" cols="25" rows="3"></textarea><br /><label><input type="submit" name="Contact Agent" id="Contact Agent" value="Contact Agent" /></label>')		
		];
		marker.openInfoWindowTabsHtml(infoTabs,{
		selectedTab:0,
		maxWidth:420
	});
		map.panTo(point);
		return false;
	}
 
	GEvent.addListener(marker, 'click', focusPoint);	
	listItemLink.onclick = focusPoint;
 
	pointData.show = function() {
		if (!visible) {
			document.getElementById('sidebar-list').appendChild(listItem);
			map.addOverlay(marker);
			visible = true;
		}
	}
	pointData.hide = function() {
		if (visible) {
			document.getElementById('sidebar-list').removeChild(listItem);
			map.removeOverlay(marker);
			visible = false;
		}
	}
 
	pointData.show();
}
 
 
 
function initializeSortTab(type) {
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
 
	listItemLink.href = "#";
	listItemLink.innerHTML = type;
	listItemLink.onclick = function() {
		changeBodyClass('standby', 'loading');
 
		for(id in markers) {
			if (markers[id].type == type || 'All' == type)
				markers[id].show();
			else
				markers[id].hide();	
		}
 
		changeBodyClass('loading', 'standby');
 
		return false;
	}
 
	document.getElementById('filters').appendChild(listItem);
}
/* [listing 6-22 end] */
 
function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}
 
function handleResize() {
	var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}
 
function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}
 
function init() {
	var type;
	var allTypes = { 'All':[] };
	
	document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
	document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };
	handleResize();
	
	map = new GMap(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	
	/* [listing 6-21] */
	for(id in markers) {
		initializePoint(markers[id]);
		allTypes[markers[id].type] = true;
	}
 
	for(type in allTypes) {
		initializeSortTab(type);
	}
	/* [listing 6-21 end] */
 
	changeBodyClass('loading', 'standby');
}
 
window.onresize = handleResize;
window.onload = init;
window.onunload = GUnload;

Open in new window

0
pda4me
Asked:
pda4me
  • 3
  • 3
1 Solution
 
JayeshKitukaleCommented:
From initial study I think you have never called the function initializeStreet anywhere in the code!
0
 
pda4meAuthor Commented:
Hello,

How do I call the function, can you show me where/how to do this?

Thanks!
0
 
JayeshKitukaleCommented:
in function initializePoint(pointData)
before this line:
map.panTo(point);
Try this and let me know if it works as I am not able to run the code here.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
JayeshKitukaleCommented:
As in:
.
.
maxWidth:420
});
initializeStreet(pointData); << Add this line
map.panTo(point);
return false;
.
.
0
 
pda4meAuthor Commented:
Awesome!  Thanks!
0
 
pda4meAuthor Commented:
Many thanks!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now