Load Markers from a SQL on Google Maps v3
===

I'm trying to send some markers info to a SQL, the markers are saving to SQL successful,

But I cant take the data to a page that load the markers, I think thats a problem on programming, or calling the markers to they positions

I will post the link of my examples, and them the programming.

[This][1] is the page that save the markers

And [this][2] is the page that load the informations of the database


  [1]: http://www.inventoresdegaragem.com/dbteste/index.htm
  [2]: http://www.inventoresdegaragem.com/dbteste/loady.htm

This is my code of index.html

    <script>
    var map, ren, ser;
    var data = {};
    var data2 = {};
    var marker;
    var infowindow;
    
    var directionsDisplay;
    
    function goma()
    {
    	
    	map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(26.05678288577881, -80.30236816615798) })
    	
    	//markers
    	
    
          var html = "<table>" +
                     "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
                     "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
                     "<tr><td>Tipo:</td> <td><select id='type'>" +
                     "<option value='oficina' SELECTED>oficina</option>" +
                     "<option value='restaurante'>restaurante</option>" +
                     "</select> </td></tr>" +
                     "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";
        infowindow = new google.maps.InfoWindow({
         content: html
        });
    //eventos
    	google.maps.event.addListener(map, "click", function(event) {
            marker = new google.maps.Marker({
              position: event.latLng,
              map: map
            });
            google.maps.event.addListener(marker, "click", function() {
              infowindow.open(map, marker);
            });
        });
    	

    	ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    	ren.setMap(map);
    	ren.setPanel(document.getElementById("directionsPanel"));
    	ser = new google.maps.DirectionsService();
    	ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination':  new google.maps.LatLng(
    -23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
    		if(sts=='OK')ren.setDirections(res);	
    	})		
    }
    
   
    function saveData()
    {
    	//save markers
    	

    	  
    	  var name = escape(document.getElementById("name").value);
          var address = escape(document.getElementById("address").value);
          var type = document.getElementById("type").value;
          var latlng = marker.getPosition();
     
           var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                    "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
          downloadUrl(url, function(data2, responseCode) {
            if (responseText == 200 && data.length <= 1) {
              infowindow.close();
              document.getElementById("message").innerHTML = "Salvo";
    		}
    		});
    		
    }
    var string = JSON.stringify(data2)
   
    	  function downloadUrl(url, callback) {
    	  var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    	request.open('POST',url, true);
    	request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    	request.send('command=save&marker='+string)
    	request.onreadystatechange = function(){ if(request.readyState==4) {
    		if(request.responseText.indexOf('bien')+1)alert('Mapa Atualizado !');
    		else alert(request.responseText)
    	}
    	}
    		
        }

    //save waypoints
    function save_waypoints()
    {
    	var w=[],wp;
    	var rleg = ren.directions.routes[0].legs[0];
    	data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()}
    	data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()}
    	var wp = rleg.via_waypoints	
    	for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]	
    	data.waypoints = w;
    	
    	
    	
    
    
    
    	
    	var str = JSON.stringify(data)
    	
    
    	var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    	jax.open('POST','process.php');
    	jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    	jax.send('command=save&inventoresdegara='+str)
    	jax.onreadystatechange = function(){ if(jax.readyState==4) {
    		if(jax.responseText.indexOf('bien')+1)alert('Mapa Atualizado !');
    		else alert(jax.responseText)
    		
    		
    
    	
    }
    
    //Geocoding (pesquisar)
    	function marcar(){
      				var endereco = document.getElementById("endereco").value ;
      				//alert(endereco)
      				geocoder = new google.maps.Geocoder();		
      				geocoder.geocode({'address':endereco}, function(results, status){ 
      					if( status = google.maps.GeocoderStatus.OK){
    						latlng = results[0].geometry.location;
    						markerInicio = new google.maps.Marker({position: latlng,map: map});		
    						map.setCenter(latlng); 
    					}			
    				});
    	}
    	
    function doNothing() {}

   
This is my code of the loady.html

      <script>
      var map, ren, ser;
      var data = {};
      var directionsDisplay;
      var marker;
      var infowindow;
      function goma()
     {
     map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(26.05678288577881, -80.30236816615798) })
    
    	 ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    	 ren.setMap(map);
    	ren.setPanel(document.getElementById("directionsPanel"));
    	ser = new google.maps.DirectionsService();
    	fetchdata();
    	fetchdataMarker()
    		
    	
    }
    
    function adicionaMarker()
    {
    	marker = new google.maps.Marker({
              position: (latlng),
              map: map
    	});
    }
    
    //Draw the waypoints from DB
    function setroute(os)
    {
    	var wp = [];
    	for(var i=0;i<os.waypoints.length;i++)
    	wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),'stopover':false }
    		  		
    	ser.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
    	'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
    	'waypoints': wp,
    
    	'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
    		if(sts=='OK')ren.setDirections(res);
    		  var infoWindow = new google.maps.InfoWindow;

    		
    	})	
    }
    
    //Coleta as informações do DB
    function fetchdata()
    {
    	var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    	jax.open('POST','process.php');
    	jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    	jax.send('command=fetch')
    	jax.onreadystatechange = function(){ if(jax.readyState==4) {		
    		try { setroute( eval('(' + jax.responseText + ')') ); } 
    		catch(e){ alert(e); }
    		
    	}}
    	  
        
    }
    
    function fetchdataMarker()
    {
    	  var name = escape(document.getElementById("name").value);
          var address = escape(document.getElementById("address").value);
          var type = document.getElementById("type").value;
          var latlng = marker.getPosition();
     
           var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                    "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
          downloadUrl(url, function(data2, responseCode) {
            if (responseCode == 200 && data2.length <= 1) {
              infowindow.close();
              document.getElementById("message").innerHTML = "Salvo";
            }
    			
          });
    //function downloadUrl(url, callback) {
          var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        request.open('POST','phpsqlinfo_addrow.php');
    	request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    	request.send('command=fetch1')
    	request.onreadystatechange = function(){ if(request.readyState==4) {		
    		try { adicionaMarker( eval('(' + request.responseText + ')') ); } 
    		catch(e){ alert(e); }//}
    
            
            }
          };
    

    	  request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
          request.send('command=fetch1');*/
        }
    
    
    
    </script>


To finish, this is my PHP archive (phpsqlinfo_addrow.php) used to save only the markers

    <?php
    require("phpsqlinfo_dbinfo.php");
    
    
    // Gets data from URL parameters
    $name = $_GET['name'];
    $address = $_GET['address'];
    $lat = $_GET['lat'];
    $lng = $_GET['lng'];
    $type = $_GET['type'];
    
    // 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());
    }
    
    // Insert new row with user data
    
    if($_REQUEST['command']=='save')
    	{
    $query = sprintf("INSERT INTO markers " .
             " (id, name, address, lat, lng, type ) " .
             " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
             mysql_real_escape_string($name),
             mysql_real_escape_string($address),
             mysql_real_escape_string($lat),
             mysql_real_escape_string($lng),
             mysql_real_escape_string($type));
    	}
    	
    	if($_REQUEST['command']=='fetch1')
    	{
    $query = sprintf("INSERT INTO markers " .
             " (id, name, address, lat, lng, type ) " .
             " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
             mysql_real_escape_string($name),
             mysql_real_escape_string($address),
             mysql_real_escape_string($lat),
             mysql_real_escape_string($lng),
             mysql_real_escape_string($type));
    	}
    		 
    
    $result = mysql_query($query);
    
    if (!$result) {
      die('Invalid query: ' . mysql_error());
      
     
    }
    
    
    ?>


Thanks guys =), wainting one answer, I dont have any idea how to solve it