display map

<?php

/*

	Template Name: showmap
*/

	add_filter( 'template_include', 'portfolio_page_template', 99 );

	function portfolio_page_template( $template ) {

		if ( is_page( 'display-map' )  ) {
			$new_template = locate_template( array( 'display.php' ) );
			if ( '' != $new_template ) {
				return $new_template ;
			}
		}

		return $template;
	}

	get_header();








 /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>> Read and Get From Table */



	 function get_address() {
	 global $wpdb;

	 $address_table = $wpdb->prefix . "address_table";

	 $query = $wpdb->get_results('SELECT * FROM ' . $address_table);



	 foreach($query as $single_query)

	 //Put the lat , lng results into array, return array and assign to var. Then use array keys where necessary
	 $data = json_decode($single_query->json);
	 $result = array();
	 $result['lat'] = $data->results[0]->geometry->location->lat;
	 $result['long'] = $data->results[0]->geometry->location->lng;
	 return $result;
	 }
	 $latlong = get_address();

    ?>

     <div id="map" style="width:300px; height:300px;"></div>

     <!--Have to get lat and lng from database-->
     <script>
     var geocoder;
     var map;
     function initialize() {
     var mapOptions = {
     center: new google.maps.LatLng(<?php echo $latlong['lat'] ?>, <?php echo $latlong['long'] ?>),
     zoom: 8,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     var map = new google.maps.Map(document.getElementById("map"),
       mapOptions);
     }
     google.maps.event.addDomListener(window, 'load', initialize);
     </script>

	 <form method="post" action="" id="insertForm" name="insertForm">
     <input type="text" value="" placeholder="enter city" id="city" name="city">
     <input type="text" value="" placeholder="enter full address" id="address" name="address">

     <input type="submit" value="search">
     </form>




	<?php
	get_footer();

?>