?
Solved

A map including geolocation, multiple markers retrieved from database

Posted on 2016-10-24
2
Medium Priority
?
199 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 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Many of you may be aware of the recent Google Docs scam emails that have been floating around coming from various people that you know. Here's a guide on identifying How To Identify the Scam Email You will see an email from someone you’ve had co…
This Micro Tutorial demonstrates how to create custom reports and the secrets of determine the metrics and dimensions for your data that works best with your needs.
This Micro Tutorial will demonstrate how to analyze your website's back links using a network graph powered by a fusion table.
Suggested Courses
Course of the Month9 days, 11 hours left to enroll

762 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