nurul.osman@gmail.com Posted May 30, 2013 Share Posted May 30, 2013 (edited) In my Mysql database i have a table named 'map' with fields id, lat, lon I want to display all lat, lon on google map. pls help me giving sample php code. Edited May 30, 2013 by nurul.osman@gmail.com Link to comment Share on other sites More sharing options...
birbal Posted May 30, 2013 Share Posted May 30, 2013 Have you checked googl map api? Link to comment Share on other sites More sharing options...
nurul.osman@gmail.com Posted June 2, 2013 Author Share Posted June 2, 2013 I am trying following code. -------<html> <head> <script type='text/javascript' src='jquery-1.6.2.min.js'></script> <script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script> <style> BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; } #map_canvas { width:100%; height: 100%; z-index: 0; } </style> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFPBnlN3fAfpkCmPAPjYkZMFp9e3VopXU&sensor=false"></script> <script type='text/javascript'> //This javascript will load when the page loads. jQuery(document).ready( function($){ //Initialize the Google Maps var geocoder; var map; var markersArray = []; var infos = []; geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP } //Load the Map into the map_canvas div var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //Initialize a variable that the auto-size the map to whatever you are plotting var bounds = new google.maps.LatLngBounds(); //Initialize the encoded string var encodedString; //Initialize the array that will hold the contents of the split string var stringArray = []; //Get the value of the encoded string from the hidden input encodedString = document.getElementById("encodedString").value; //Split the encoded string into an array the separates each location stringArray = encodedString.split("****"); var x; for (x = 0; x < stringArray.length; x = x + 1) { var addressDetails = []; var marker; //Separate each field addressDetails = stringArray[x].split("&&&"); //Load the lat, long data var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]); //Create a new marker and info window marker = new google.maps.Marker({ map: map, position: lat, //Content is what will show up in the info window content: addressDetails[0] }); //Pushing the markers into an array so that it's easier to manage them markersArray.push(marker); google.maps.event.addListener( marker, 'click', function () { closeInfos(); var info = new google.maps.InfoWindow({content: this.content}); //On click the map will load the info window info.open(map,this); infos[0]=info; }); //Extends the boundaries of the map to include this new location bounds.extend(lat); } //Takes all the lat, longs in the bounds variable and autosizes the map map.fitBounds(bounds); //Manages the info windows function closeInfos(){ if(infos.length > 0){ infos[0].set("marker",null); infos[0].close(); infos.length = 0; } } }); </script> </head> <body> <div id='input'> <?php //Connect to the MySQL database that is holding your data, replace the x's with your data mysql_connect("localhost", "******_*****", "**********") or die("Could not connect: " . mysql_error()); mysql_select_db("**********"); //Initialize your first couple variables $encodedString = ""; //This is the string that will hold all your location data $x = 0; //This is a trigger to keep the string tidy //Now we do a simple query to the database $result = mysql_query("SELECT * FROM `map`"); //Multiple rows are returned while ($row = mysql_fetch_array($result, MYSQL_NUM)) { //This is to keep an empty first or last line from forming, when the string is split if ( $x == 0 ) { $separator = ""; } else { //Each row in the database is separated in the string by four *'s $separator = "****"; } //Saving to the String, each variable is separated by three &'s $encodedString = $encodedString.$separator. "<p class='content'><b>lat:</b> ".$row[1]. "<br><b>lon:</b> ".$row[2]. "<br><b>Name: </b>".$row[3]. "<br><b>Address: </b>".$row[4]. "<br><b>Division: </b>".$row[5]. "</p>&&&".$row[1]."&&&".$row[2]; $x = $x + 1; } ?> <input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" /> </div> <div id="map_canvas"></div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now