Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- tr:nth-child(even) {background: #CCC}
- tr:nth-child(odd) {background: #FFF}
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- html,
- body,
- #map_canvas {
- margin: 0;
- padding: 0;
- height: 100%;
- }
- table,
- tr,
- td {
- height: 100%;
- }
- .text {
- width: 300px;
- height: 600px;
- background-color: white;
- overflow:scroll;
- overflow-y: auto;
- overflow-x: hidden;
- }
- #side_bar {
- z-index: 100;
- position: absolute;
- top: 135px;
- left: 1050px;
- }
- #panel {
- z-index: -100;
- display: block;
- position: absolute;
- top: 135px;
- left: 1050px;
- }
- #mdiv {
- z-index: 500;
- width: 25px;
- height: 25px;
- display: none;
- background-color: red;
- border: 1px solid black;
- position: absolute;
- left: 1300px;
- top: 112px;
- }
- .mdiv {
- height: 25px;
- width: 2px;
- margin-left: 12px;
- background-color: black;
- transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- /* IE 9 */
- -webkit-transform: rotate(45deg);
- /* Safari and Chrome */
- z-index: 1;
- }
- .md {
- height: 25px;
- width: 2px;
- background-color: black;
- transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- /* IE 9 */
- -webkit-transform: rotate(90deg);
- /* Safari and Chrome */
- z-index: 2;
- }
- tr:nth-child(even) {background: #CCC}
- tr:nth-child(odd) {background: #FFF}
- </style>
- </head>
- <link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
- <body>
- <div class="bh-sl-container">
- <div id="page-header">
- <h1 class="bh-sl-title">The Auditor Locator</h1>
- </div>
- <div class="bh-sl-form-container">
- <form id="bh-sl-user-location" method="post" action="#">
- <div class="form-input">
- <label for="bh-sl-address">Enter Address or Zip Code:</label>
- <input id= "address" type="text" value="Palo Alto, CA"></input>
- <input type= "button" value="Submit" onclick="codeAddress();"></input>
- </div>
- </form>
- </div>
- <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <table border="0">
- <tr>
- <td>
- <div id="map" style="height: 600px; width:1000px;"></div>
- </td>
- <td>
- <div id="side_bar" class='text'></div>
- <div id="panel" class='text'></div>
- </td>
- </tr>
- </table>
- <div id="info"></div>
- <div id="mdiv">
- <div class="mdiv">
- <div class="md">
- </div>
- </div>
- </div>
- <script type="text/javascript">
- var locations = [
- <?php
- $servername = "mysql7.000webhost.com";
- $username = "a8814009_locator";
- $password = "vincer64";
- $dbname = "a8814009_auditor";
- // Create connection
- $conn = new mysqli($servername, $username, $password, $dbname);
- // Check connection
- if ($conn->connect_error) {
- die("Connection failed: " . $conn->connect_error);
- }
- $sql = "SELECT id, name, address, lat, lng, Icon FROM markers";
- $result = $conn->query($sql);
- if ($result->num_rows > 0) {
- // output data of each row
- while($row = $result->fetch_assoc()) {
- echo '["' . $row["name"]. '"'. ', '. '"' . $row["address"].'"'.', '. '"'. $row["lat"].','. $row["lng"].'"'.', '. '"'. $row["Icon"]. '"]'. ',';
- }
- } else {
- echo "0 results";
- }
- $conn->close();
- ?>
- ];
- // alert(locations.length);
- var geocoder = null;
- var map = null;
- var customerMarker = null;
- var gmarkers = [];
- var closest = [];
- var directionsDisplay = new google.maps.DirectionsRenderer();;
- var directionsService = new google.maps.DirectionsService();
- var map;
- function initialize() {
- // alert("init");
- geocoder = new google.maps.Geocoder();
- map = new google.maps.Map(document.getElementById('map'), {
- zoom: 9,
- center: new google.maps.LatLng(52.6699927, -0.7274620),
- mapTypeId: google.maps.MapTypeId.ROADMAP
- });
- var infowindow = new google.maps.InfoWindow();
- var marker, i;
- var bounds = new google.maps.LatLngBounds();
- document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
- for (i = 0; i < locations.length; i++) {
- var coordStr = locations[i][2];
- var coords = coordStr.split(",");
- var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
- bounds.extend(pt);
- marker = new google.maps.Marker({
- position: pt,
- map: map,
- icon: locations[i][3],
- address: locations[i][1],
- title: locations[i][0],
- html: locations[i][0] + "<br>" + locations[i][1] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),"" + locations[i][1] + "");'>Get Directions</a>"
- });
- gmarkers.push(marker);
- google.maps.event.addListener(marker, 'click', (function(marker, i) {
- return function() {
- infowindow.setContent(marker.html);
- infowindow.open(map, marker);
- }
- })
- (marker, i));
- }
- map.fitBounds(bounds);
- $("#mdiv").click(function() {
- $("#side_bar").css({
- "z-index": 100,
- "top": "135px"
- });
- $("#panel").css("z-index", -100);
- $("#mdiv").css("display", "none");
- })
- }
- function codeAddress() {
- var address = document.getElementById('address').value;
- geocoder.geocode({
- 'address': address
- }, function(results, status) {
- if (status == google.maps.GeocoderStatus.OK) {
- map.setCenter(results[0].geometry.location);
- if (customerMarker) customerMarker.setMap(null);
- customerMarker = new google.maps.Marker({
- map: map,
- position: results[0].geometry.location
- });
- closest = findClosestN(results[0].geometry.location, 12);
- // get driving distance
- closest = closest.splice(0, 12);
- calculateDistances(results[0].geometry.location, closest, 12);
- } else {
- alert('Geocode was not successful for the following reason: ' + status);
- }
- });
- }
- function findClosestN(pt, numberOfResults) {
- var closest = [];
- document.getElementById('info').innerHTML += "processing " + gmarkers.length + "<br>";
- for (var i = 0; i < gmarkers.length; i++) {
- gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
- document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "<br>";
- gmarkers[i].setMap(null);
- closest.push(gmarkers[i]);
- closest.sort(sortByDist);
- }
- return closest;
- }
- function sortByDist(a, b) {
- return (a.distance - b.distance)
- }
- function calculateDistances(pt, closest, numberOfResults) {
- var service = new google.maps.DistanceMatrixService();
- var request = {
- origins: [pt],
- destinations: [],
- travelMode: google.maps.TravelMode.DRIVING,
- unitSystem: google.maps.UnitSystem.IMPERIAL,
- avoidHighways: false,
- avoidTolls: false
- };
- for (var i = 0; i < closest.length; i++) {
- request.destinations.push(closest[i].getPosition());
- }
- service.getDistanceMatrix(request, function(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('side_bar');
- outputDiv.innerHTML = '';
- var results = response.rows[0].elements;
- // save title and address in record for sorting
- for (var i = 0; i < closest.length; i++) {
- results[i].title = closest[i].title;
- results[i].address = closest[i].address;
- results[i].idx_closestMark = i;
- }
- results.sort(sortByDistDM);
- for (var i = 0;
- ((i < numberOfResults) && (i < closest.length)); i++) {
- closest[i].setMap(map);
- outputDiv.innerHTML += "<a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],"click");'>" + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a><br><hr>"
- }
- }
- });
- }
- function getDirections(origin, destination) {
- var request = {
- origin: origin,
- destination: destination,
- travelMode: google.maps.DirectionsTravelMode.DRIVING
- };
- directionsService.route(request, function(response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setMap(map);
- directionsDisplay.setDirections(response);
- $("#side_bar").css({
- "z-index": -100,
- "top": "135px"
- });
- $("#panel").css("z-index", 100);
- $("#mdiv").css("display", "block");
- directionsDisplay.setPanel(document.getElementById('panel'));
- }
- });
- }
- function sortByDistDM(a, b) {
- return (a.distance.value - b.distance.value)
- }
- google.maps.event.addDomListener(window, 'load', initialize);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement