Solved

A map including geolocation, multiple markers retrieved from database

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sending E-mail ASP.Net 3 55
javascript 5 42
Sums of coloumns in html/java 15 64
Does Google Docs require GMail? 2 31
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
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 …
This Micro Tutorial demonstrates how to quickly find related content for YourTango's posts using MozBar Chrome extension.

943 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

10 Experts available now in Live!

Get 1:1 Help Now