Wednesday, June 26, 2013

Sidebar & Google Map : View Points In Google Map

How to store and retrieve points using AJAX and a server-side language.





Step 1 - Include this code in index.php and view points on google map

var side_bar_html = ""; 

function createMarker(point,name,address,html) {

  var marker = new GMarker(point, {icon:myIcon});

  var html = "< href=\""+ name +"\">";

  GEvent.addListener(marker,'click', function(){marker.openInfoWindowHtml(html);});

  gmarkers.push(marker);

  side_bar_html += "<div><a href='javascript:myclick(" + (gmarkers.length-1) + ")'>" + name + "</a></div>
                    <p></p><div> " + address + "<p></p></div>";   

 return marker;           
     }

  function myclick(i) {
  GEvent.trigger(gmarkers[i], "click");
  }

  function initialize() {
  var map;

  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(40.7144,-74.006),15);
    adsManager.enable();
    map.addControl(new GMapTypeControl());
    map.enableGoogleBar();
    map.addControl(new GScaleControl());
    map.addControl(new GLargeMapControl());
    map.enableScrollWheelZoom();

 var urlstr = "ajax_mysql.php";

 GDownloadUrl(urlstr, function(data) {
 var xml = GXml.parse(data);
 var markers = xml.documentElement.getElementsByTagName("marker");
 for (var i = 0; i < markers.length; i++) {
 var name = markers[i].getAttribute("name");
 var address = markers[i].getAttribute("address");
 var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
 parseFloat(markers[i].getAttribute("lng")));
 var marker = createMarker(point,name,Histoire,luck,date,address,Nom,image);
 map.addOverlay(marker);
 }
 document.getElementById("add-point").innerHTML = side_bar_html;
 });
}
   else{
alert('Sorry, your navigator is not compatible with Google Maps');
      }
 }

Step 2 - file ajax_mysql.php

$user = "root";
$password = "";
$host = "localhost";
$bdd = "localiser";
mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur connexion)

0 Responses to “Sidebar & Google Map : View Points In Google Map”

Post a Comment

All Rights Reserved WP-Tutorial | Blogger Template by REFES Adda