SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Internet Explorer won't display Google map - possibly Javascript problem

    Hello

    Please bear with me. I'm not a Javascript developer, I know just enough to follow simple scripts.

    I have posted a Google map on a page at www.gothla.co.uk/map.php

    I have used exactly the same Javascript code (other than the geographic references) on two other websites and had no problem viewing the maps on those pages.

    I have learnt that the optimum way to show a Google map with markers is by placing the Javascript code in the footer file just before the </body> tag.

    For this site, Firefox displays the page without any problems. However, in Internet Explorer I get a dialog box saying that Internet Explorer cannot open the page, even though it appears behind the dialog box, and that the Operation is aborted. The page then disappears. This happens on both my PC and my laptop.

    My other web pages displaying Google maps continue to work fine in IE.

    It's no good dismissing the problem and saying I should use Firefox. Most of the people visiting this site will be using Internet Explorer.

    I suspect that there may be a Javascript issue here. Has anyone else come across this problem?

    Thank you. Sue Hutton

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Sue,

    If you remove your script call from the bottom off the page and place the function below into the head off the document just under
    Code:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA5On-BRXK1dQpuSTT8uNDUhRuNOYrx9tOjhPs0KcRKs3ykYzMlBSWOQv9RqX-xDP7WSY2Gg6ZvtAxtw" type="text/javascript"></script>
    tag your page should then work

    Code:
    <script type="text/javascript">
        //<![CDATA[
    		window.onload = function(){
    			showMap();
    		}
    		function showMap(){
    			if (GBrowserIsCompatible()) { 
    				function createMarker(point,html) {
    					var marker = new GMarker(point);
    					GEvent.addListener(marker, "click", function() {
    						marker.openInfoWindowHtml(html);
    					});
    					return marker;
    				}
    			
    			// Display the map, with some controls and set the initial location 
    			var map = new GMap2(document.getElementById("map"));
    			map.addControl(new GLargeMapControl());
    			map.addControl(new GMapTypeControl());
    			map.setCenter(new GLatLng(52.639457, -1.131248), 15);
    			
    			// Set up eight markers with info windows 		
    			var point = new GLatLng(52.6395, -1.1311);
    			var marker = createMarker(point,'<strong>(1)</strong> Quebec Club, hafla <br />workshops by Sashi, Tempest and Ariellah')
    			map.addOverlay(marker);     
    			
    			var point = new GLatLng(52.641319, -1.133587);
    			var marker = createMarker(point,'<strong>(2)</strong> Urban Martial Arts & Fitness Centre<br />workshops by Dawn O Brien, Chrissie Emery and Akasha')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.640537, -1.130369);
    			var marker = createMarker(point,'<strong>(3)</strong> Rack and Roll American Pool Hall<br />venue for Darkscape Goth Night')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.6399, -1.1327);
    			var marker = createMarker(point,'<strong>(4)</strong> St Margarets Bus Station<br />Leicester')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.6315, -1.1263);
    			var marker = createMarker(point,'<strong>(5)</strong> Railway Station<br />Leicester')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.6396, -1.131678);
    			var marker = createMarker(point,'<strong>(6)</strong> Days Inn<br />Abbey Street, Leicester')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.6397, -1.126);
    			var marker = createMarker(point,'<strong>(7)</strong> Campanile Hotel<br />St Matthews Way, Leicester')
    			map.addOverlay(marker);
    			
    			var point = new GLatLng(52.6343, -1.123);
    			var marker = createMarker(point,'<strong>(8)</strong> Ibis Hotel<br />Constitution Hill, Leicester')
    			map.addOverlay(marker);
    		} else {
    			alert("Sorry, the Google Maps API is not compatible with this browser");
    		}
    	}
    	//]]>
    </script>
    not sure why but IE requires the Google map code to be in a function

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You dont have to put google js code to head. I think problem is that script load to slowly and other one with marker settings loads before google one is loaded, that is why it gives you strange errors. Working tested and simple solution is add defer attribute to script with marker settings
    Code:
    defer="defer"
    http://msdn.microsoft.com/workshop/a...ties/defer.asp
    Anyway it still dont work in IE7 and I have no idea why. You can see example here http://www.club-hotel-praha.cz/cs/mapa


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •