4 Replies - 505 Views - Last Post: 30 June 2014 - 03:00 PM

#1 aya_eltokhy  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 07-November 12

google maps with database

Posted 29 June 2014 - 05:19 PM

hello everyone

i have this code which calculate the shortest path between points and draw this path my problem is i wants to put this point dynamically from database but i cant can any one help me please ......




<?php
$con = mysql_connect('localhost','root','');

$select  =mysql_select_db('googlemaps');
	
// STEP 2: Query the table with the marker information

$r=mysql_query("SELECT * FROM aya");
	
// STEP 3: Store the marker info in arrays for each row found
// save the count of markers for later

$mrk_cnt = 0;
while ($obj =mysql_fetch_array($r))  // get all rows (markers)
{
    $lat[$mrk_cnt] = $obj[1];  // save the latitude
    $lng[$mrk_cnt] = $obj[2];  // save the longitude
   
    $mrk_cnt++;                      // increment the marker counter
}

	
// Now we have the latitude, longitude and info-window text for each marker 
// stored in php arrays. Now we need to write the marker's Javascript 
// dynamically with this information
	
?>

<html>
<head>
<title>Distance finder</title>
<meta type="description" content="Find the distance between two places on the map and the shortest route."/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">




	
	// finds the coordinates for the two locations and calls the showMap() function
	
	// creates and shows the map
	function showMap()
	{
	
	var location=[];
	



location.push(new google.maps.LatLng(31.0444196,31.23571160000006));

location.push(new google.maps.LatLng(25.088938,32.899829299999965));

location.push(new google.maps.LatLng(26.2578957,33.81160669999997));	

location.push(new google.maps.LatLng(28.9770632,32.5114949));



	var directionsDisplay = [];
	var request = [];
	var marker=[];
	var infowindow=[];
	var latlng;
	var map;
	var distance;	

var cen;
cen = location.length/2;

latlng = new google.maps.LatLng(location[0].lat(),location[0].lng());

		var mapOptions = 
		{
			zoom: 1,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.HYBRID
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		
		directionsService = new google.maps.DirectionsService();


for (var i = 0; i < location.length; i++) {

		infowindow.push(new google.maps.InfoWindow({
			content: "Place number " + i
		}));	
		
		var marker = new google.maps.Marker({
		position: location[i],
		map: map,
		title: 'Place number ' + i});
		(function(i, marker) {
		google.maps.event.addListener(marker, 'click', function() {
		infowindow[i].open(map,marker);
		});
		})(i, marker);
}

		/////////////////////////////
		
for( var i=0;i<location.length;i++){
		
		directionsDisplay.push(new google.maps.DirectionsRenderer(
		{
			suppressMarkers: true,
			suppressInfoWindows: true
		}));
		
		directionsDisplay[i].setMap(map);
	
	if(i!=location.length-1){
		 request.push({
			origin:location[i], 
			destination:location[i+1],
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		});
	}
	else{
		 request.push({
			origin:location[i], 
			destination:location[0],
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		});		
	}
				
}


		directionsService.route(request[0], function(response, status) 
		{		
				directionsDisplay[0].setDirections(response);
		});

		directionsService.route(request[1], function(response, status) 
		{
				directionsDisplay[1].setDirections(response);
		});

		directionsService.route(request[2], function(response, status) 
		{
				directionsDisplay[2].setDirections(response);
		});

		directionsService.route(request[3], function(response, status) 
		{
				directionsDisplay[3].setDirections(response);
		});
	
		
	}

</script>

</head>

<body bgcolor="#eeeeee">
	
<center>
<div id="map_canvas" style="width:70%; height:54%"></div>
</center>
    
    <script type="text/javascript">
	
	showMap();
	
	</script>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: google maps with database

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4404
  • View blog
  • Posts: 12,260
  • Joined: 18-April 07

Re: google maps with database

Posted 29 June 2014 - 08:34 PM

Ok well you have your two PHP arrays $lat and $lng which contain your points that you need to map. Now the trick is that these are PHP arrays and you need javascript arrays in order to use them with the google map. So you are going to need to put in some code in your page which will take PHP and convert them into javascript on the page so when the page is rendered it will have the javascript arrays which can be used with the map.

One way you could do this is to take your $lat and $lng arrays and encode them into JSON aka "Javascript Object Notation". PHP has a function that can do this called json_encode(). So right above where you have your showMap function defined you could have a couple lines like...


var lats = <?php echo json_encode($lat); ?>;
var longs = <?php echo json_encode($lng); ?>;



What we are saying here is take our PHP arrays, encode them into JSON arrays and set them to javascript variables "lats" and "longs". Once this is done now you have javascript arrays you can use to pull data from and place in your Google map. Now this is a simplified version but you get the idea. When you put these lines in and run the page, you should see something like this in your Javascript code...

var lats = [34.2, 87.2, -23.5];
var longs = [-96.6, 56.8, 162.7];



Then you use lats[2] and longs[2] to get point 3 for your map. Hope you get the idea here. :)

This post has been edited by Martyr2: 29 June 2014 - 08:35 PM

Was This Post Helpful? 1
  • +
  • -

#3 aya_eltokhy  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 07-November 12

Re: google maps with database

Posted 30 June 2014 - 04:29 AM

thanksssssssssssssssssssssssss
Was This Post Helpful? 0
  • +
  • -

#4 aya_eltokhy  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 07-November 12

Re: google maps with database

Posted 30 June 2014 - 03:00 PM

can you please tell me where i put this in my code because it dose not work with me :nottalkingtoyou:
Was This Post Helpful? 0
  • +
  • -

#5 aya_eltokhy  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 07-November 12

Re: google maps with database

Posted 30 June 2014 - 03:00 PM

can you please tell me where i put this in my code because it dose not work with me :nottalkingtoyou:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1