hi i am new to web development i am developing a website using a word press theme however i have made a html/js code which i want to insert in one of the page with a full width template. my html/js looks like this
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API v3 Example: Distance Matrix</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
#map-canvas {
height: 100%;
width: 100%;
position: relative;
z-index: -1;
}
#outputDiv {
font-size: 11px;
}
table { background-color: #828282; border-collapse: collapse;
left: 75px;
right: 0;
bottom: 0;
top: 50px;
position: fixed;
float: left;
z-index: 0;
opacity: 1;
}
table,th {border: 4px solid #000;
}
table,td { font-family: Roboto; font-size: 14px; font-weight: 300;
}
p {display: inline;}
#span1 { background-color: #828282; width: 140px; float: left; height: 100%}
#span2 { background-color: #828282; width: 50px; float: right;height: 100% }
</style>
<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var origin1 = '';
var destinationA = '';
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
var bluestylemap = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2b2b2b"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#040404"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.fill",
"stylers": [
{
"hue": "#ff0000"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"hue": "#ff0000"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#0c526e"
},
{
"lightness": 17
}
]
}
];
var mapOptions = {
center: new google.maps.LatLng(19.105934, 72.849618),
zoom: 10,
mapTypeControlOptions: {
mapTypeId: [google.maps.MapTypeId.ROADMAP , 'mumbaimap']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var styledMapOptions = {
name: 'Mumbai Map'
};
var mumbaiMapType = new google.maps.StyledMapType(
bluestylemap, styledMapOptions);
map.mapTypes.set('mumbaimap', mumbaiMapType);
map.setMapTypeId('mumbaimap');
var fromText = document.getElementById('FAdd');
var options = {
componentRestrictions: {country: 'in'}
};
var fromAuto = new google.maps.places.Autocomplete(fromText, options);
fromAuto.bindTo('bound', map);
var toText = document.getElementById('TAdd');
var toAuto = new google.maps.places.Autocomplete(toText, options);
toAuto.bindTo('bound', map);
geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [document.getElementById("FAdd").value],
destinations: [document.getElementById("TAdd").value],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
var amt_to_pay = document.getElementById('amt_to_pay');
var totalfare = document.getElementById('totalfare');
var auto_fare = document.getElementById('auto_fare');
var taxi_fare = document.getElementById('taxi_fare');
var auto_save = document.getElementById('auto_save');
var taxi_save = document.getElementById('taxi_save');
outputDiv.innerHTML = '';
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += results[j].distance.value + '<br>';
var totalmts = document.getElementById('outputDiv').innerHTML ;
var totalkms = Math.round(parseInt(totalmts) / 1000);
var totalamt = totalkms * 10;
var totalautofare = totalkms * 10;
var totaltaxifare = Math.round(totalkms * 12.4);
var autosavings = Math.round(totalautofare - totalamt);
var taxisavings = Math.round(totaltaxifare - totalamt);
amt_to_pay.innerHTML = totalkms;
totalfare.innerHTML = totalamt;
auto_fare.innerHTML = totalautofare;
taxi_fare.innerHTML = totaltaxifare;
auto_save.innerHTML = autosavings;
taxi_save.innerHTML = taxisavings;
}
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert('Geocode was not successful for the following reason: '+ status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (var i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<table>
<thead>
<tr>
<td aling="left" height="50">FARE ESTIMATE
</td>
</tr>
</thead>
<tbody>
<tr>
<td height="30" width="" align="center">
<input type="text" id="FAdd" size="20" placeholder="Enter Pickup Lcation">
</td>
</tr>
<tr>
<td height="30" width="" align="center">
<input type="text" id="TAdd" size="20" placeholder="Enter Destination Lcation">
</td>
</tr>
<!--just for creating space-->
<tr>
<td height="30" ><div id="span1">Distance:</div><div id="span2"><div id="amt_to_pay"></div></div></td>
</tr>
<tr>
<td height="30" ><div id="span1">Fare:</div><div id="span2"><div id="totalfare"></div></div></td>
</tr>
<tr>
<td height="30" ><div id="span1">You Save(Auto)</div><div id="span2"><div id="auto_save"></div></div></td>
</tr>
<tr>
<td height="30" ><div id="span1">You Save(Taxi)</div><div id="span2"><div id="taxi_save"></div></div></td>
</tr>
<tr>
<td height="40" width="" align="center">
<div id="inputs">
<p><button type="button" style="color: #000; font-size: 10pt"; onclick="calculateDistances();">Compare Fare</button></p>
</div>
</td>
</tr>
</table>
<div style="display: none;">
<table align = center>
<tr>
<td width="30%" align="left">
<h2> Distance (Kms) </h2> <div id="amt_to_pay"></div>
</td>
<td>
</td>
<td width="30%" align="left" >
<h2> Fare (Rs.) </h2> <div id="totalfare" ></div>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h3> Auto </h3>
</td>
<td>
</td>
<td width="30%" align="left">
<h3> Taxi </h3>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h4> You pay: </h4>
</td>
<td>
<div id="auto_fare" ></div>
</td>
<td width="30%" align="left">
<h4> You pay: </h4>
</td>
<td align="left">
<div id="taxi_fare"></div>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h4> You save: </h4>
</td>
<td>
<div id="auto_save" ></div>
</td>
<td width="25%" align="left">
<h4> You save:</h4>
</td>
<td>
<div id="taxi_save" ></div>
</td>
</tr>
</table>
</div>
<div id="outputDiv" style="display: none;"></div>
<div id="wrapper">
<div id="map-canvas"></div>
<div id="table"></div>
</div>
</body>
</html>
an also my template page looks like this
<?php
/*
Template Name: Full Width Page
*/
get_header(); ?>
<div class="clear"></div>
</header> <!-- / END HOME SECTION -->
<div id="content" class="site-content">
<div class="container">
<div class="content-left-wrap col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() ) :
comments_template();
endif;
?>
<?php endwhile; // end of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .content-left-wrap -->
</div><!-- .container -->
<?php get_footer(); ?>
how do i merge the these 2 ? thanks in advance any help and hints will be appreciated
