javascript - inserting html-js in a single wordpress templet page -
hi new web development developing website using word press theme have made html/js code want insert in 1 of page full width template. html/js looks 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(); (var = 0; < origins.length; i++) { var results = response.rows[i].elements; addmarker(origins[i], false); (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 not successful following reason: '+ status); } }); } function deleteoverlays() { if (markersarray) { (var 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 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> pay: </h4> </td> <td> <div id="auto_fare" ></div> </td> <td width="30%" align="left"> <h4> pay: </h4> </td> <td align="left"> <div id="taxi_fare"></div> </td> </tr> <tr> <td width="30%" align="left"> <h4> save: </h4> </td> <td> <div id="auto_save" ></div> </td> <td width="25%" align="left"> <h4> 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 template page looks 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 open or have @ least 1 comment, load comment template if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?> <?php endwhile; // end of loop. ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .content-left-wrap --> </div><!-- .container --> <?php get_footer(); ?> how merge these 2 ? in advance , hints appreciated
remove doctype declaration (head, title , closing tags) map file , use get_template_part() https://codex.wordpress.org/function_reference/get_template_part
Comments
Post a Comment