Solved

A map including geolocation, multiple markers retrieved from database

Posted on 2016-10-24
2
37 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 9

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
Comment Utility
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
Comment Utility
I tried it, but this doesn't have the geolocation
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Last month, Google released a new update for Google Sheets. This new update offers new ways to visualize and analyze data. Use this article to learn how to take advantage of the new tools now available for charts, cells and collaboration with Google…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This Micro Tutorial will demonstrate using Google Doc how to import live data to another spreadsheet in Google Spreadsheets using the IMPORTRANGE function.
This Micro Tutorial demonstrates how to quickly find related content for YourTango's posts using MozBar Chrome extension.

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now