Link to home
Start Free TrialLog in
Avatar of egoselfaxis
egoselfaxis

asked on

Getting errors trying to load external HTML file into a DIV using jQuery 3.x's load() method

I'm running in to some difficulty loading an HTML file into a DIV using JQuery 3.x's load() method:

http://api.jquery.com/load/

Although I am successfully able to load and display the HTML file, .. I am getting JavaScript errors, which I'd like to eliminate/suppress.

I have this very simple JS function to trigger the loading of the HTML file:

function loadGoogleMapView(pageurl) {
	$("#myMap").load(pageurl);
}

Open in new window


.. and then I am calling the method by passing the HTML filename to it:

<a href="#" onclick="loadGoogleMapView('map-view.html');">View Map</a>

Open in new window


The contents of the HTML file that I'm trying to load is as follows (note that I have deliberately stripped out my Google Maps API key).

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style>
	#mapView { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>	

</head>

<body>

<div id="mapView"></div>

<script>
function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916
	};
	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167
	};
	var sheridan = {
		info: '<strong>Chipotle on Sheridan</strong><br>\r\
					6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
					<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
		lat: 42.002707,
		long: -87.661236
	};
	var locations = [
      [broadway.info, broadway.lat, broadway.long, 0],
      [belmont.info, belmont.lat, belmont.long, 1],
      [sheridan.info, sheridan.lat, sheridan.long, 2],
    ];
	var map = new google.maps.Map(document.getElementById('mapView'), {
		zoom: 13,
		center: new google.maps.LatLng(41.976816, -87.659916),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#17263c'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]		
	});

	var infowindow = new google.maps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			animation: google.maps.Animation.DROP,
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}
		
console.log('Google Maps API version: ' + google.maps.version);

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;callback=initMap"></script>

</body>
</html>

Open in new window


As I mentioned, I am able to get the HTML file to load and display, but I am getting the following Javascript errors:

Locally .. using Firefox Developer Edition:

XML Parsing Error: not well-formed
Location: file:///C:/Users/yvan/Documents/websites/demo/map-view.html
Line Number 136, Column 17: map-view.html:136:17
TypeError: google.maps is undefined[Learn More]

Locally .. using Chrome (HTML file does NOT load or display)

jquery-3.3.1.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/yvan/Documents/websites/demo/map-view.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Remotely .. using Firefox

TypeError: google.maps is undefined

Remotely .. using Chrome

VM27:140 Uncaught TypeError: Cannot read property 'version' of undefined
    at <anonymous>:140:55
    at m (jquery-3.3.1.min.js:2)
    at Re (jquery-3.3.1.min.js:2)
    at w.fn.init.append (jquery-3.3.1.min.js:2)
    at w.fn.init.<anonymous> (jquery-3.3.1.min.js:2)
    at z (jquery-3.3.1.min.js:2)
    at w.fn.init.html (jquery-3.3.1.min.js:2)
    at Object.<anonymous> (jquery-3.3.1.min.js:2)
    at u (jquery-3.3.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)




I understand about the CORs specific errors in Chrome, .. which don't really bother me.  However, the Javascript errors are a nuisance, and I'd like to get rid of them.  

Why is the load method treating the HTML file as an XML file?  Is there a better way to accomplish this .. perhaps without having to use jQuery? I am 100% open to alternate approaches, just so long as the solution functions similarly and is free of JS errors.  

*** Just one last important note: I am trying to load the external HTML file into DIV so that I don't have to call the Google Maps API on page load -- but instead only when map view is specifically requested on a search results page, .. mainly so I that don't pound the Google Maps API needlessly and exceed my daily quota.  

Thanks,
- Yvan
ASKER CERTIFIED SOLUTION
Avatar of Eddie Shipman
Eddie Shipman
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of egoselfaxis
egoselfaxis

ASKER

Well, as I mentioned .. the HTML tags are being rendered, and the JavaScript is definitely running (since my Google Map is displaying properly).   But I'm definitely getting some kind of parsing error, since my JS console is nagging about malformed XML.  

I'm somewhat averse to using an iframe, as that approach is somewhat outdated and comes with some security issues.  I'd be more interested to know what you mean about creating a script tag, loading the maps api, and then calling initMap to load the Map View.  Could you perhaps provide me with some kind of example?

Thanks Eddie.
- Yvan
Avatar of egoselfaxis
egoselfaxis

ASKER

Actually .. it turns out that the iframe approach actually worked out quite well for me .. so you can disregard my previous answer.  

Thanks Eddie!
- Yvan
Avatar of leakim971
leakim971
Flag of Guadeloupe image
why don't you load the map by default and unhide it when user click on the link?
Avatar of egoselfaxis
egoselfaxis

ASKER

>> *** Just one last important note: I am trying to load the external HTML file into DIV so that I don't have to call the Google Maps API on page load -- but instead only when map view is specifically requested on a search results page, .. mainly so I that don't pound the Google Maps API needlessly and exceed my daily quota.  
Avatar of leakim971
leakim971
Flag of Guadeloupe image
So you can put this in the initial page head (please note the extra code at the end) :
<style>
	#mapView { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>
<script>
function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916
	};
	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167
	};
	var sheridan = {
		info: '<strong>Chipotle on Sheridan</strong><br>\r\
					6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
					<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
		lat: 42.002707,
		long: -87.661236
	};
	var locations = [
      [broadway.info, broadway.lat, broadway.long, 0],
      [belmont.info, belmont.lat, belmont.long, 1],
      [sheridan.info, sheridan.lat, sheridan.long, 2],
    ];
	var map = new google.maps.Map(document.getElementById('mapView'), {
		zoom: 13,
		center: new google.maps.LatLng(41.976816, -87.659916),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#17263c'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]		
	});

	var infowindow = new google.maps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			animation: google.maps.Animation.DROP,
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}
	
// NOT PRESENT AT PAGE LOAD	
// console.log('Google Maps API version: ' + google.maps.version);

jQuery(function($) {
	$(".lViewMap").click(function(event) {
		$.getScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;callback=initMap");
	});
});

</script>

Open in new window


and This in the div#myMap or, better(?), just replace myMap with it :
<div id="mapView"></div>

Open in new window


your link is now like this :
<a href="#mapView" class="lViewMap">View Map</a>

Open in new window