Load Google Maps on webpage using Javascript and PHP through drop down form -
i having 2 drop down lists on html page. data coming mysql database , contains information latitude, longitude , address. user selects 1 item drop down , clicks on submit.
at stage, want display google map , put marker @ latitude , longitude. then, when user selects option second drop down, want add marker on map.
currently, able load map once clicks submit first drop down options tried drop pins not working.
here code have achieved till now:
<?php error_reporting(e_all); ini_set('display_errors', '1'); require_once('auth.php'); include ('loginconfig.php'); include ('fetchagentdetails.php'); include ('fetchdeliverydetails.php'); ?> <!-- change template, choose tools | templates , open template in editor. --> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>delivery management system</title> <script src="http://maps.googleapis.com/maps/api/js?key=aizasya0rm5ak0byu1f_tzhjkg97cchhhlqfrqy&sensor=false"> </script> <style type="text/css"> html {height:100%} body {height:100%;margin:0;padding:0} #googlemap {height:100%} </style> <script> function initialize() { var mapprop = { center:new google.maps.latlng(51.508742,-0.120850), zoom:5, maptypeid:google.maps.maptypeid.roadmap }; var map=new google.maps.map(document.getelementbyid("googlemap") ,mapprop); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <style type="text/css"> <!-- .style1 { font-size: 20px; font-weight: bold; } --> </style> <style type="text/css"> table.collection {width:250px;border:2px solid black;border-style: outset;border-collapse:collapse;} table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;padding:10px;} table.collection tr:hover {background-color:#ffe;} table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:10px;} table.collection td {text-decoration:none; display:table-row; padding:0px; height:100%;} </style> </head> <body bgcolor="#8e8e38" <div style="clear: right;"> <p align="left" class="style1">welcome delivery manager! </p> <img style="position: absolute; top: 0; right: 0;" src="./images/logo.jpg" alt="company logo" width="90" height="60" align="middle"></img> </div> <p align="left"><a href ="home.php">home</a></p> <hr></hr> <!-- start main wrap --> <form method="post"> <fieldset> <div style="clear: left;float:left;"> <label for="deliverylist">delivery items:</label> <select name="deliverylist" id="deliverylist"> <option value="select delivery item" selected="selected">select delivery item</option> <?php $deliveryhandler = new fetchdeliverydetails(); $itemnamearray = $deliveryhandler->getitemnames(); foreach ($itemnamearray $innerarray) { if (is_array($innerarray)) { $value = $innerarray['itemname']; echo "<option value=\"$value\""; if (isset($_post['deliverylist']) && $_post['deliverylist'] == $value) echo 'selected'; echo ">" . $value . "</option>\n"; } } ?> </select> <input type="submit" name="submit" id="submit" value="submit"/> </div> <div style="clear: right;float:right;"> <label for="agentlist">avaliable agent:</label> <select name="agentlist" id="agentlist"> <option value="" selected="selected">select agent assign</option> <?php $agenthandler = new fetchagentdetails(); $agentnamearray = $agenthandler->getagentnames(); foreach ($agentnamearray $innerarray) { if (is_array($innerarray)) { $agentid = $innerarray['agentid']; $firstnamevalue = $innerarray['firstname']; $lastnamevalue = $innerarray['lastname']; $fullname = $firstnamevalue . ' ' . $lastnamevalue; echo "<option value=\"$agentid\">$fullname</option>\n"; } } ?> </select> <input type="submit" name="agentsubmit" id="agentsubmit" value="check location"/> </div> </fieldset> </form> <?php if (isset($_post['deliverylist'])) { $selecteditemname = $_post['deliverylist']; $deliveryhander = new fetchdeliverydetails(); $itemdetailsarray = $deliveryhander->getalldeliverydetails($selecteditemname); foreach ($itemdetailsarray $valuesarray) { $itemnamevalue = $valuesarray['itemname']; $itemdescriptionvalue = $valuesarray['itemdescription']; $ownerfirstname = $valuesarray['firstname']; $ownerlastname = $valuesarray['lastname']; $dateadded = $valuesarray['dateadded']; $deliverydate = $valuesarray['deliverydate']; $deliveryaddress = $valuesarray['deliveryaddress']; $deliverylatitude = $valuesarray['deliverylatitude']; $deliverylongitude = $valuesarray['deliverylongitude']; $assignedagent = $valuesarray['assignedagentid']; if ($assignedagent == 0) { $assignedagent = "-"; } echo "<table border=\"1\" align=\"left\" class =\"collection\">\n"; echo "<tr>\n"; echo "<td >item name:<b>$itemnamevalue</td>\n"; echo "</tr>\n"; echo "<tr>\n"; echo "<td>item description: <b>$itemdescriptionvalue</td>\n"; echo "</tr>\n"; echo "<tr>\n"; echo "<td>owner name: <b>$ownerfirstname $ownerlastname</td>\n"; echo "</tr>\n"; echo "<tr>\n"; echo "<td>date added: <b>$dateadded</td>\n"; echo "</tr>\n"; echo "<tr>"; echo "<td>delivery date: <b>$deliverydate</td>"; echo "</tr>"; echo "<tr>"; echo "<td>delivery address: <b>$deliveryaddress</td>"; echo "</tr>"; echo "<tr>"; echo "<td>assigned agent: <b>$assignedagent</td>"; echo "</tr>"; echo "</table>"; echo "<div id=\"googlemap\" style=\"width:500px;height:380px;\"></div>"; } } if (isset($_post['agentlist'])) { } ?> </body> </html> i forgot, first php application, in fact first web application. please go easy on me. point out other errors also, please stick question.
ok got working using iframe :) , bit of php
reference:
http://www.youtube.com/watch?v=htm-3cduafw
echo "<iframe style =\"display: block; width: 800px; padding-top: 2px; height: 400px; margin: 0 auto; border: 0;\" width=\"425\" height=\"350\" align=\"center\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"https://maps.google.com/maps?f=d&source=s_d&saddr=$agent_map_url& daddr=$map_url&hl=en&z=10&t=m&mra=ls&ie=utf8&output=embed\"></iframe><br/>";
Comments
Post a Comment