Solved

A map including geolocation, multiple markers retrieved from database

Posted on 2016-10-24
2
119 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 500 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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 62
Wordpress and Wufoo 1 40
href return to normal window 5 31
testing a web application for ipad on windows pc 3 41
You can provide a virtual interface for remote stakeholders in a SWOT analysis through a Google Drawing template. By making real time viewing and collaboration possible, your team can build a stronger product.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This Micro Tutorial demonstrates in Google Analytics how to create a custom report that shows you traffic over time using the month of year dimensions. There are also instructions on how to fix Google's odd month of year formatting, which Microsoft …
By using UNIQUE function in Google Sheets, you can get around removing duplicates like in Microsoft Excel.

730 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