Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

A map including geolocation, multiple markers retrieved from database

Posted on 2016-10-24
2
Medium Priority
?
264 Views
Last Modified: 2016-10-29
Hello, I have been working in this website since long. I want to include a google map that will let users see their location with the help of geolocation, and all shops which are around them. Data about these shops are stored in a database, in multiple table. Moreoever, once this first map is loaded, the user will have the option to filter his search through checkboxes which are also generated from the database....
But i can't have my markers, even tho my geolocation is working.
 Here is my code, will you tell me where i am going wrong


<!-- Main -->
		<div id="main">
			<div class="container">
				<div class="row">

					<!-- Sidebar -->
					<div id="sidebar" class="4u">
						<section>
							<header>
								
								<li><a href="C:/wamp/www/sbm/category.html">Category</a></li>
							</header>
							<div class="row">
								<section class="6u">
									<ul class="default">
										<li><a href="#">Category</a></li>
										<!--generating the checkboxes-->
										<?php 	
									
									include_once 'connection.php';


# execute search query
$sql = 'SELECT CategoryName FROM CATEGORY';
$result = $db-> query($sql);


#check the result
if (!$result)
    die('Could not successfully run query: ' . mysql_error());
echo "<table>";  

// run through the results from the database, generating the checkboxes  
  
while($row = $result->fetch_assoc())
{
   echo "<tr>";  

   echo "<td>";  
   echo "<ul class='checklist'>";  
   echo "<li>";  
   echo "<input id='categorylist' type='checkbox' name='Category[]'  value=" .$row['CategoryName']. " >";  
   foreach ($row as $key => $value)
                    echo '<td>'.htmlspecialchars($value).'</td>';
                echo '</tr>';
   echo "</li>";  
   echo "</ul>";  
   echo "</td>";  
   echo "</tr>";  
}
  

echo "</table>";  
?>
									</ul>
								</section>
								<section class="6u">
									<ul class="default">
										<li><a>Card Type</a></li>
										<!--generating the checkboxes-->
											<?php 	
									
									include_once 'connection.php';


# execute search query
$sql = 'SELECT CardType FROM cardtype';

$result = $db-> query($sql);


#check the result
if (!$result)
    die('Could not successfully run query: ' . mysql_error());
echo "<table>";  

// run through the results from the database, generating the checkboxes  
  
while($row = $result->fetch_assoc())
{

   echo "<tr>";  

   echo "<td>";  
   echo "<ul class='checklist'>";  
   echo "<li>";  
   echo "<input id='categorylist' type='checkbox' name='CardTyoe[]'  value=" .$row['CardType']. " >";  
   foreach ($row as $key => $value)
                    echo '<td>'.htmlspecialchars($value).'</td>';
                echo '</tr>';
   echo "</li>";  
   echo "</ul>";  
   echo "</td>";  
   echo "</tr>";  
}
  

echo "</table>";  
?>
									</ul>
								</section>
									
							</div>
						</section>
						
					</div>
					
					<!-- Content -->
					<div id="content" class="8u skel-cell-important">
						<section>
							<header>
								<h2>Your Location</h2>
								<span class="byline"></span>
							</header>
							
							

<body onload="getLocation()">

<div id="mapholder"></div>


<!--geolocation-->


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAI2XOOAOkdh7S2agRAZAxppTtCeVlway8&callback=initMap"></script>

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '500px';
    mapholder.style.width = '700px';

    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}



</script>
<!-- putting multiple markers using the code given by google developpers-->
<script>
var customIcons = {
      Hotel: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      Beauty Care: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };


function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);

downloadUrl("newsbm/merchant/map3.php", function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var shopname = markers[i].getAttribute("shopName");
    var address = markers[i].getAttribute("address");
	var region = markers[i].getAttribute("region");
	var discountRate = markers[i].getAttribute("discountRate");
	var categoryName = markers[i].getAttribute("categoryName");
    
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("LAT")),
        parseFloat(markers[i].getAttribute("LNG")));
    var html = "<b>" + shopName + "</b> <br/>" + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
});
function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
</script>

Open in new window



this is the code for "map3" file which is working and generating the xml file
<?php

require ("connection.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=@mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "Select ShopName, Address, region, discountRate, categoryname, lat, lng 
FROM SHOP, SHOP_ADDRESS, LOCATION, DISCOUNT, CATEGORY
WHERE SHOP.shopID=SHOP_ADDRESS.shopID 
AND SHOP_ADDRESS.locationID=LOCATION.locationID 
AND SHOP.shopID=DISCOUNT.shopID 
AND SHOP.categoryID= CATEGORY.categoryID 
order by ShopName";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");


// Iterate through the rows, adding XML nodes for each

while ($row = mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("shopname",$row['ShopName']);
  $newnode->setAttribute("address",$row['Address']);
  $newnode->setAttribute("region",$row['region']);
  $newnode->setAttribute("discountRate",$row['discountRate']);
  $newnode->setAttribute("categoryname",$row['categoryname']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
 
}

echo $dom->saveXML();


?>

Open in new window


I don't know why it can't be merged. I will be pleased if someone can help me.
0
Comment
Question by:Vassantray Vinita
2 Comments
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 2000 total points
ID: 41857300
I was searching on a similar functionality for opencart... I came across this Google article...
it may be useful to you Google Article
0
 

Author Comment

by:Vassantray Vinita
ID: 41857443
I tried it, but this doesn't have the geolocation
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Whether you’re looking to gather data for research or gather feedback on an idea, being able to build and distribute your own online survey is not only cost-effective, but allows you to reach a larger audience and receive results in real-time. Googl…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This Micro Tutorial demonstrates in Google Sheets how to use the HYPERLINK function to create live links inside your spreadsheet.
This Micro Tutorial will demonstrate Google Calendar to monitor updates with top sites, such as Facebook, Google, Twitter, etc. with Marketing News. Each update of Google Calendar can be monitored, correlate dips and spikes in your website traffic, …
Suggested Courses
Course of the Month15 days, 11 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question