asked on

Google map does not load

Hi:

I have this html/css/javascript code to display google map on the website. Somehow while combining the 2 html files I messed up the google map. The map does not show on the web page. I need help here to display the map correctly.

Thanks,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />
<title>About the Library</title>
<meta property='og:site_name' content='LIBRARY' />
<meta property='og:title' content='About the Library' />
<meta property='og:description' content='Los Angeles, CA 90020 –Social Hall' />
<meta property='og:image' content='' />
<meta property='og:url' content='http://library.com/about-the-library.html' />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
    height:600px !important;
}
</style>
<![endif]-->

<link rel='stylesheet' href='http://www.dragndropbuilder.com/editor/images/common/common.css?10' type='text/css' />
<link rel='stylesheet' type='text/css' href='/files/main_style.css?893444104133604600' title='wsite-theme-css' />
<style type='text/css'>
#wsite-content div.paragraph, #wsite-content p, #wsite-content .product-description, .blog-sidebar div.paragraph, .blog-sidebar p, .wsite-form-field label, .wsite-form-field label {}
#wsite-content h2, #wsite-content .product-title, .blog-sidebar h2{}
#wsite-title{font-family:Georgia !important;font-size:24px !important;}
</style>
<script type='text/javascript'><!--
var STATIC_BASE = 'http://www.dragndropbuilder.com/';
var STYLE_PREFIX = 'wsite';
//-->
</script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/libraries/prototype/1.7-custom/prototype.min.js'></script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/libraries/scriptaculous/1.9.0-custom/effects.min.js'></script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/editor/images/common/utilities.js?4'></script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/editor/images/common/lightbox202.js?9'></script>
<script type='text/javascript' src='http://www.dragndropbuilder.com/editor/libraries/flyout_menus.js?13'></script>
<script type='text/javascript'><!--
function initFlyouts(){initPublishedFlyoutMenus([{"id":"122664640769900158","title":"Library Catalog","url":"index.html"},{"id":"611088282353166598","title":"About the Library","url":"about-the-library.html"},{"id":"813612181614597800","title":"Ask a Librarian","url":"ask-a-librarian.html"},{"id":"939506420111845331","title":"Support your Library","url":"support-your-library.html"}],'611088282353166598',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'active',false)}
if (Prototype.Browser.IE) window.onload=initFlyouts; else document.observe('dom:loaded', initFlyouts);
//-->
</script>
<!--************************************************************-->
<!--Visit Google Maps to get an api code for your website the link is http://code.google.com/apis/maps/signup.html -->
<!--************************************************************-->
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJcCqY2I8H6La5HN5YYi2fxRXScraiaUtWPrrNLzLynCTnuYYzRTctoMgfT34t1_7jdRJeTkSuj1jag" type="text/javascript"> </script>
	
<script type="text/javascript">
/* Error messages for possible errors */
		var error_address_empty 	= 'Please enter a valid address.';
		var error_invalid_address 	= 'This address is invalid. Make sure to enter your street number and city as well'; 
		var error_google_error 		= 'There was a problem processing your request, please try again.';
		var error_no_map_info		= 'Sorry! Map information is not available for this address.';
		
		
		/**********************************************************************************************************************/
		/* CHANGE THIS TO YOUR ADDRESS - The default address of your store, This address will display on the map on startup */
		/**********************************************************************************************************************/
		var default_address = 'Los Angeles, CA, 90017 ';
		
		
		
		var current_address = null; /* Current address we are displaying, we save it here for directions */
		var map				  = null; /* Instance of Google Maps object */
		var geocoder		  = null; /* Instance of Google Deocoder object */
		var gdir				  = null; /* Instance of Google Directions object */
		var map_compatible  = false; /* Whether or not user's browser is compatible to show the map */
		
		/* Check if the browser is compatible */
		if( GBrowserIsCompatible() ) {
			map_compatible = true;
		}
		
		/* Initialize the map this will be called when the document is loaded from: <body onLoad="initialize_map();"> */
		function initialize_map() {
			if( map_compatible ) {
				map 	  	= new GMap2(document.getElementById('map_canvas'));        
				geocoder = new GClientGeocoder();
				show_address(default_address);
				
				/* This displays the zoom controls for the map. If you don't want them just delete the line */
				map.addControl(new GSmallMapControl());
				
				/* This displays the map type. If you don't want that feature then just delete this */
				map.addControl(new GMapTypeControl());
				
			}
		}
		
		/* This function will move the map and shows the address passed to it */
		function show_address(address) {
			if( map_compatible && geocoder ) {
				/* Save this address in current_address value to use later if user wants directions */
				current_address = address;		
				geocoder.getLatLng(
				address,
				function( point ) {
					if( !point ) {
						alert(error_no_map_info);
					} else {
						map.setCenter(point, 13);
						var marker = new GMarker(point);
						map.addOverlay(marker);
						marker.openInfoWindowHtml(address);
					}
				}
				);
			}
			return false;
		}
		
		/* Get the directions */
		function get_directions() {
			if( map_compatible ) {
				if( document.direction_form.from_address.value == '' ) {
					alert(error_address_empty);
					return false;
				}
				/**
				 * Delete the contents of 'directions' DIV first 
				 * because user might ask for directions more than once.
				**/
				document.getElementById('directions').innerHTML = '';
				
				gdir = new GDirections(map, document.getElementById('directions'));
				
				/* Setup to event handlers, one: when the directions are loaded, two: if there was any error */
				GEvent.addListener(gdir, 'load',  onGDirectionsLoad);
				GEvent.addListener(gdir, 'error', handleErrors);
				
				/* Show the directions */
				set_directions(document.direction_form.from_address.value, current_address);			
			}
			return false;
		}
		
		/* This will actually set the directions on the map and loads the direction table */
		function set_directions(fromAddress, toAddress) {
      	gdir.load("from: " + fromAddress + " to: " + toAddress,
                	{ "locale": "en" });
    	}
		
		/* This will handle the errors might happen while retrieving the directions */
		function handleErrors(){
			if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
				alert(error_invalid_address);
			else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
				alert(error_google_error);
			else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
				alert(error_address_empty);
			else 
				alert(error_invalid_address);
		}
		
		/* This function will be called when the directions are loaded */
		function onGDirectionsLoad(){
			/* We will simple scroll down to the directions, but with a little delay so it's loaded */
			setTimeout('eval(\'window.location = "#directions_table"\;\')', 500);
		}
</script>

</head>
<body class='wsite-page-about-the-library weeblypage-about-the-library' onLoad='initialize_map();'>
<div id="wrapper">
        <div id="container">
            <div class="title"><span id="wsite-title">LIBRARY</span></div>
            <div id="header" class="wsite-header"></div>

            
            <div id="navigation">
                <ul><li id='pg122664640769900158'><a href='/index.html'>Library Catalog</a></li><li id='active'><a href='/about-the-library.html'>About the Library</a></li><li id='pg813612181614597800'><a href='/ask-a-librarian.html'>Ask a Librarian</a></li><li id='pg939506420111845331'><a href='/support-your-library.html'>Support your Library</a></li></ul>
            </div>

            
            <div id="contenttop">
                <div id="contentbtm">
                    <div id="content">
<!--======================================================================================-->
<div id="main-wrapper">
<div id="main-padding">
  <div id="seperator"></div>
        <table width="100%" height="94">
<tr valign="top">
				<td width="33%" colspan="3">
					
         
  <div id="headertextdiv">
		  		
<div id="bannerLogo">
                     
   <!--******************************************************-->   
           <!--CHANGE THIS INFO TO YOUR OWN-->
   <!--******************************************************-->      
              <h1>OUR COMPANY NAME</h1>
              <h2>Our tagline<br />
                      555 | 555 | 5555<br />
                someone@email.com</h2>
            </div>
            <div id="bannerAddress">
	 
   <!--******************************************************-->    	  
              <!--CHANGE THIS TO YOUR OWN ADDRESS-->
   <!--******************************************************-->
              <p><strong>ADDRESS</strong><br />
		      	711 West Broadway<br />
		      	Vancouver, BC <br/>  
		      	V5Z 3Y2 <br />  
   
  <!--*****************************************************************************-->             
  <!--CHANGE THIS TO YOUR OWN ADDRESS. FOLLOW THE FORMAT STREET, CITY, STATE, ZIP --> 
   <!--***************************************************************************-->     
		      	<a href="#" onClick="return show_address('Los Angeles, CA, 90017');">Map it!</a>
             	</p>
		    </div>
					
                    
                    </div>
					
	    <div align="center"></div></td>
</tr>
	</table>

			<div id="seperator"></div>	
	<div id="map_canvas"></div>
		
		<form name="direction_form" onSubmit="get_directions(); return false;" class="form">
			Need directions? Enter your address: <input type="text" name="from_address" class="form-field" /><br /><br />
			<input type="submit" value="  Get Directions  " class="form-submit" />
		</form>		
		
		<a name="directions_table"></a>
		<div id="directions"></div>
		
		
</div>
</div>
	<div class="footer-fix"> </div>
<!--=============================================================================================-->
                <div id='wsite-content'><h2  style=" text-align: left; "><FONT size=3><STRONG>Location:</STRONG></FONT></h2>
<div  class="paragraph editable-text" style=" text-align: left; display: block; "><STRONG><EM>Los Angeles, CA, 90017<br /><span></span>&ndash;Social Hall</EM></STRONG></div>

<h2  style=" text-align: left; "><FONT size=3><STRONG>Working hours:</STRONG></FONT></h2>
<div  class="paragraph editable-text" style=" text-align: left; display: block; "><FONT size=2><STRONG>10:00 AM&nbsp;to 1:30 PM<br /><span></span>(Open Sundays only) <br /></STRONG></FONT></div>

<h2  style=" text-align: left; "><FONT size=3><STRONG>About the library:</STRONG></FONT></h2>

<div  class="paragraph editable-text" style=" text-align: left; "><STRONG>Suggestions to improve Library operations and activities are greatly appreciated.&nbsp; </STRONG></div>

</div>

                    <div class="clear"></div>
                    </div>
                </div>        
            </div>
                <div id="footer">
                    <a href='http://www.dot5hosting.com/' target='_blank'>Web Hosting</a> by Dot5Hosting
                </div>
        <div class="clear"></div>        
        </div>            
    </div> 

</body>
</html>

Open in new window

Kim Walker

Did you move this file to a different domain? This is an older version of Google Maps which required an access key which was tied to a single domain name. The access key is not valid when used in a different domain from the one which is was issued for. If the file has been moved to a new domain, you must request a new access key for the new domain. Though this version is no longer supported, you can request a key here.

adamssap

ASKER

Thanks, but is the html code correct without any errors? Are there any repitative tags?

Ramblings

go into tools/javascript console on your browser.

If there are any javascript errors, they would be reported there. You need to see if the mapping code is even being executed.

Kim Walker

On line 48, in your Google Maps uri, change

v=2

Open in new window

v=2.x

Open in new window

adamssap

ASKER

The API key is correct for my domain. If I use the code below, map works, but the above code posted with the original question does not work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<!--************************************************************-->
<!--CHANGE THIS TITLE TO SOMETHING THAT IS RELEVANT TO YOUR SITE-->
<!--************************************************************-->
<title>ICSC Library</title>


<style type="text/css">
		/***************************************************************************\
		|* This section is where you can change the look of the page.  *************|
		\***************************************************************************/
		* {
			padding:0px;
			margin:0px;
			font-family:Tahoma, "MS Sans Serif", Arial;
			font-size:10pt;
			color:#4B4B4B;
		}
		
		body {
			min-width:600px;
			text-align:center;
			background-image: url(../images/main3.gif);
		}
		
		#main-wrapper {
			width:600px;
			text-align:left;
			margin:auto;
			margin-top:20px;
			background-color:#EEEEEE;
			border-bottom:2px solid #4B4B4B;
			border-right:2px solid #4B4B4B;			
		}
		
		#main-padding {
			padding:10px;
		}
		
		.footer-fix {
			height:20px;
		}
		
		#menu {
			text-align:center;
			margin-top:20px;
		}
		
		#content {
			margin-top:20px;
		}
		
		a {
			color:#4B4B4B;
		}
		a:hover {
			color:#999999;
		}
		
		h1 {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size:14pt;
			margin-bottom:15px;
		}
		
		h2 {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size:10pt;
			margin-bottom:15px;
		}
		
		.inline-image {
			vertical-align:middle;
		}
		
		#map_canvas {
			width:580px;
			height:400px;
			margin-top:15px;
		}
		
		#directions {
			margin-top:10px;
		}
		
		.form {
			margin:0px;
			padding:0px; 
			margin-top:20px;
		}
		.form-field {
			vertical-align:middle; 
			border:1px solid #999999;
			background-color:#EEEEEE;
		}
		.form-submit {
			font-family:Georgia, "Times New Roman", Times, serif;
			border:1px solid #999999;
			background-color:#EEEEEE;
			font-size:7pt;
			font-weight:bold;
		}
		
		#main-wrapper #main-padding #bannerdiv {
			width: 132px;
		}
		#main-wrapper #main-padding #headertextdiv {
			width: 570px;
			float: left;
		}
		#main-wrapper #main-padding #seperator {
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #CCCCCC;
			margin: 7px;
		}
		#bannerAddress {
			float: right;
			width: 200px;
		}
		#bannerLogo {
			width: 350px;
			float: left;
		}
		
		/***************************************************************************\
		|* The end of the styles ***************************|
		\***************************************************************************/
</style>
		
        
<!--************************************************************-->
<!--Visit Google Maps to get an api code for your website the link is http://code.google.com/apis/maps/signup.html -->
<!--************************************************************-->
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJcCqY2I8H6La5HN5YYi2fxRXScraiaUtWPrrNLzLynCTnuYYzRTctoMgfT34t1_7jdRJeTkSuj1jag" type="text/javascript"> </script>
	
<script type="text/javascript">
/* Error messages for possible errors */
		var error_address_empty 	= 'Please enter a valid address.';
		var error_invalid_address 	= 'This address is invalid. Make sure to enter your street number and city as well'; 
		var error_google_error 		= 'There was a problem processing your request, please try again.';
		var error_no_map_info		= 'Sorry! Map information is not available for this address.';
		
		
		/**********************************************************************************************************************/
		/* CHANGE THIS TO YOUR ADDRESS - The default address of your store, This address will display on the map on startup */
		/**********************************************************************************************************************/
		var default_address = '770 Wilshire Blvd, Los Angeles, CA, 90017 ';
		
		
		
		var current_address = null; /* Current address we are displaying, we save it here for directions */
		var map				  = null; /* Instance of Google Maps object */
		var geocoder		  = null; /* Instance of Google Deocoder object */
		var gdir				  = null; /* Instance of Google Directions object */
		var map_compatible  = false; /* Whether or not user's browser is compatible to show the map */
		
		/* Check if the browser is compatible */
		if( GBrowserIsCompatible() ) {
			map_compatible = true;
		}
		
		/* Initialize the map this will be called when the document is loaded from: <body onLoad="initialize_map();"> */
		function initialize_map() {
			if( map_compatible ) {
				map 	  	= new GMap2(document.getElementById('map_canvas'));        
				geocoder = new GClientGeocoder();
				show_address(default_address);
				
				/* This displays the zoom controls for the map. If you don't want them just delete the line */
				map.addControl(new GSmallMapControl());
				
				/* This displays the map type. If you don't want that feature then just delete this */
				map.addControl(new GMapTypeControl());
				
			}
		}
		
		/* This function will move the map and shows the address passed to it */
		function show_address(address) {
			if( map_compatible && geocoder ) {
				/* Save this address in current_address value to use later if user wants directions */
				current_address = address;		
				geocoder.getLatLng(
				address,
				function( point ) {
					if( !point ) {
						alert(error_no_map_info);
					} else {
						map.setCenter(point, 13);
						var marker = new GMarker(point);
						map.addOverlay(marker);
						marker.openInfoWindowHtml(address);
					}
				}
				);
			}
			return false;
		}
		
		/* Get the directions */
		function get_directions() {
			if( map_compatible ) {
				if( document.direction_form.from_address.value == '' ) {
					alert(error_address_empty);
					return false;
				}
				/**
				 * Delete the contents of 'directions' DIV first 
				 * because user might ask for directions more than once.
				**/
				document.getElementById('directions').innerHTML = '';
				
				gdir = new GDirections(map, document.getElementById('directions'));
				
				/* Setup to event handlers, one: when the directions are loaded, two: if there was any error */
				GEvent.addListener(gdir, 'load',  onGDirectionsLoad);
				GEvent.addListener(gdir, 'error', handleErrors);
				
				/* Show the directions */
				set_directions(document.direction_form.from_address.value, current_address);			
			}
			return false;
		}
		
		/* This will actually set the directions on the map and loads the direction table */
		function set_directions(fromAddress, toAddress) {
      	gdir.load("from: " + fromAddress + " to: " + toAddress,
                	{ "locale": "en" });
    	}
		
		/* This will handle the errors might happen while retrieving the directions */
		function handleErrors(){
			if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
				alert(error_invalid_address);
			else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
				alert(error_google_error);
			else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
				alert(error_address_empty);
			else 
				alert(error_invalid_address);
		}
		
		/* This function will be called when the directions are loaded */
		function onGDirectionsLoad(){
			/* We will simple scroll down to the directions, but with a little delay so it's loaded */
			setTimeout('eval(\'window.location = "#directions_table"\;\')', 500);
		}
</script>
	
</head>

<body onLoad="initialize_map();">
<div id="main-wrapper">
<div id="main-padding">
  <div id="seperator"></div>
        <table width="100%" height="94">
<tr valign="top">
				<td width="33%" colspan="3">
					
         
  <div id="headertextdiv">
		  		
<div id="bannerLogo">
                     
   <!--******************************************************-->   
           <!--CHANGE THIS INFO TO YOUR OWN-->
   <!--******************************************************-->      
              <h1>OUR COMPANY NAME</h1>
              <h2>Our tagline<br />
                      555 | 555 | 5555<br />
                someone@email.com</h2>
            </div>
            <div id="bannerAddress">
	 
   <!--******************************************************-->    	  
              <!--CHANGE THIS TO YOUR OWN ADDRESS-->
   <!--******************************************************-->
              <p><strong>ADDRESS</strong><br />
		      	711 West Broadway<br />
		      	Vancouver, BC <br/>  
		      	V5Z 3Y2 <br />  
   
  <!--*****************************************************************************-->             
  <!--CHANGE THIS TO YOUR OWN ADDRESS. FOLLOW THE FORMAT STREET, CITY, STATE, ZIP --> 
   <!--***************************************************************************-->     
		      	<a href="#" onClick="return show_address('770 Wilshire Blvd, Los Angeles, CA, 90017');">Map it!</a>
             	</p>
		    </div>
					
                    
                    </div>
					
	    <div align="center"></div></td>
</tr>
	</table>

			<div id="seperator"></div>	
	<div id="map_canvas"></div>
		
		<form name="direction_form" onSubmit="get_directions(); return false;" class="form">
			Need directions? Enter your address: <input type="text" name="from_address" class="form-field" /><br /><br />
			<input type="submit" value="  Get Directions  " class="form-submit" />
		</form>		
		
		<a name="directions_table"></a>
		<div id="directions"></div>
		
		
</div>
</div>
	<div class="footer-fix"> </div>
</body>
</html>

Open in new window

Kim Walker

Did you change the "v" value to "2.x" in the uri? Line 48 should be:

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAJcCqY2I8H6La5HN5YYi2fxRXScraiaUtWPrrNLzLynCTnuYYzRTctoMgfT34t1_7jdRJeTkSuj1jag" type="text/javascript"></script>

Open in new window

adamssap

ASKER

Yes, I did change the value for 'v', but same result, map does not show up.

Kim Walker

It is possible that the "v" value is tied to the key. I copied your code to my own server and replaced your key with my own. When I loaded the page, I received an alert that there was no data for the address. When I changed the v (which I'm pretty sure is the version) from 2 to 2.x, it started working.

Can you post a link to the site that is not working?

adamssap

ASKER

http://icscborrowinglibrary.com/map5.html

SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adamssap

ASKER

Where do I give the width and the height? I am sorry need some hand holding here.

Thanks,