Hi all,
I’m a bit new to Ionic/web dev, and I’m trying to understand the concept for modularization, particularly as it pertains to implementing a simple Google map. My problem is as follows:
I have the following code that executes a simple Google Map:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Ideally, I’d like for the CSS to be in a separate file (/www/css), for the javascript to be in a different file (www/js), and for the html to be in a different file (/www/map.html). I’ve had success in moving the css and javascript to different files, but following that I can’t seem to get the html into the map.html file correctly. I’ve tried simply copying (what I think is) the relevant html from above ( … ), and then writing some js to have the first view be in map.html. Unfortunately this didn’t work. My hope is to modularize my html code to increase readability, and this is a relevant context for me to try to do this in. If anyone has any advice/ideas on modularity, implementing this Google Maps, or anything else please let me know
