emmaclarke Posted August 10, 2009 Share Posted August 10, 2009 Hi AllI have a web page that just has a google map inserted in it and it works fine.When i embed the same code into an existing web page it doesn't work.Working Code that works fine: <head><!--- Loading the google map api --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(52.102681,-0.609741); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDarwin, 1500); }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes" }); google.maps.event.addListener(marker, 'click', function() { map.set_zoom(14); title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes" }); } function moveToDarwin() { var darwin = new google.maps.LatLng(52.102681,-0.609741); map.set_center(darwin); } </script> </head> <!-- initialise google map ---><body onload="initialize()"> <!--- Google Map --> <br /> <br /> <p> Google Map </p> <div id="map_canvas" style="width: 35%; height: 35%"></div> <div id="footer"> <p>©2008 The Open University</p> </div> </body> </html> The web page that doesn't 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" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><title> Early Intervention Services </title><link href="index.css" rel="stylesheet" type="text/css"/>[b]<!--- Loading the google map api --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> var map; function initialize() { var myLatlng = new google.maps.LatLng(52.151239323508314, -0.47666072845458984); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDarwin, 1500); }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes" }); google.maps.event.addListener(marker, 'click', function() { map.set_zoom(14); title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes" }); } function moveToDarwin() { var darwin = new google.maps.LatLng(52.151239323508314, -0.47666072845458984); map.set_center(darwin); } </script>[/b]</head>[b]<body onload="initialize()">[/b]<table class="sample" align="center" width="60%" cellpadding="0" cellspacing="0"><tr align="center" height="150"><th width="1%"> </th><th width="15%" valign="center"> <p> Picture 1 </p> </th><th width="40%" valign="top"> <h1> Early Intervention Services</h1> <h2> Telephone number: 01234 111111 Fax number: 01234 222222<br /> Address - Bedford </h2></th></tr><tr valign="center" height="20"><td width="1%" bgcolor="#33FFCC"> </td><td width="15%" onMouseOver="this.bgColor='#33FFCC'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="index.html" style='text-decoration: none;'> <b> Home Page </b> </a> </td><td width="40%" rowspan="12" valign="top"> <h3> How to contact us </h3> <br /> <p> We can be contacted on 01234 315690 on a Monday to Friday between 9am and 5.00pm. There is an ansaphone for out of office hours.</p><h3> How to get help urgently if you are feeling distressed and are having problems coping. </h3><p>If you need urgent help when our offices are closed (we are closed between 5.00pm and 9am), you should call: <ul><li> your GP at your local surgery or</li><li> the Emergency Duty Team on 0870 2385465 </li></ul><p>You could also call the Samaritans on 01234 211211 (24 hour support)</p> </p> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#FF33CC"> </td><td width="15%" onMouseOver="this.bgColor='#FF33CC'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="treatment.htm" style='text-decoration: none;'> <b> Treatment </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#00FFFF"> </td><td width="15%" onMouseOver="this.bgColor='#00FFFF'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="referral.htm" style='text-decoration: none;'> <b> Referral </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#CC0000"> </td><td width="15%" onMouseOver="this.bgColor='#CC0000'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="psychosis.htm" style='text-decoration: none;'> <b> What is Psychosis? </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#339999"> </td><td width="15%" onMouseOver="this.bgColor='#339999'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="how.htm" style='text-decoration: none;'> <b> How We Can Help </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#9966FF"> </td><td width="15%" onMouseOver="this.bgColor='#9966FF'" onMouseOut="this.bgColor='#FFFFFF'"> <a href="family.htm" style='text-decoration: none;'> <b> Family </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#CCCC99"> </td><td width="15%" onMouseOver="this.bgColor='#CCCC99'" onMouseOut="this.bgColor='#FFFFFF'" > <a href="contact.htm" style='text-decoration: none;'> <b> Contact Us </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#CCCC99"> </td><td width="15%" onMouseOver="this.bgColor='#CCCC99'" onMouseOut="this.bgColor='#FFFFFF'" > <a href="links.htm" style='text-decoration: none;'> <b> Links </b> </a> </td></tr><tr valign="center" height="20"><td width="1%" bgcolor="#CCCC99"> </td><td width="15%" onMouseOver="this.bgColor='#CCCC99'" onMouseOut="this.bgColor='#FFFFFF'" > <a href="leaflet.htm" style='text-decoration: none;'> <b> Leaflets </b> </a> </td></tr><tr valign="center" height="300"><td width="1%"> </td><td width="15%"> <img border="0" src="NHSDirect.jpg" /></td></tr><tr valign="center" height="300"><td width="1%"> </td><td width="15%"> <p> Picture 3 </p> </td></tr><tr valign="center" height="300"><td width="1%"> </td><td width="15%"> <p> Picture 4 </p> </td></tr><tr valign="right" height="5" bgcolor="#3399CC" ><td colspan="3" align="right"> <h4> <a href="index.html"><font color="white"> <b>Home Page</b></font></a> | <a href="form.html"><font color="white"><b>Contact Us</b></font></a> </h4> </td></tr></table>[b]<!--- Google Map --> <br /> <br /> <p> Google Map </p> <p> <div id="map_canvas" style="width: 35%; height: 35%"></div> </p> [/b]</body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 10, 2009 Share Posted August 10, 2009 Do you have an API key for the other site? Do you get any error messages? Link to comment Share on other sites More sharing options...
emmaclarke Posted August 11, 2009 Author Share Posted August 11, 2009 Do you have an API key for the other site? Do you get any error messages?The web page that works, when opened in firefox and error console shows no errors.The same code that works in that web page I imported into an existing web page, contact.htmI ran error console on that web site and it comes up with "Error in parsing value for property 'width'. Declaration dropped.I scrolled through and did a search on all 'width' and all the properties look fine. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 11, 2009 Share Posted August 11, 2009 Try to remove the <p> tags around the div, see if that makes a difference. I'm not sure what the page does when you see it, I assume you just don't see the map at all. Do you have this online somewhere? Keep in mind you need to register each site you want to use maps on with Google, if you haven't done that for the second site it's not going to run (but it should show an error). Link to comment Share on other sites More sharing options...
emmaclarke Posted August 12, 2009 Author Share Posted August 12, 2009 Fixed the problem:There was code above the <head> section: <!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" xml:lang="en" lang="en"><head> I moved this under the <head> tag: <head><!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" xml:lang="en" lang="en"> The map now works fine. Probably all the web pages have this error. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 12, 2009 Share Posted August 12, 2009 The first way was correct. The doctype goes before anything else, then the html tag, then the head section goes inside the html tag. When you structure it like the way you changed it to it's not going to use the doctype, so that page is using HTML with quirks mode instead of XHTML transitional. You should change it back to what it was. If it works the other way that might be a symptom of the problem, but it's not correct to structure the page like that. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.