Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)


#1 2012-10-26 09:01:45

cZ
Member
Registered: 2012-10-26
Posts: 1

Help please. Search not happening with mysQL

Hey guys,

I am displaying a bunch of markers through mySQL.
When I do this, the autocomplete shows up but doesn't actually 'search'. I feel it is something to do with my onload call in the body tag?
Can anyone help? Code is below. Thanks in advance!

 <!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>map</title>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="js/gmap3.min.js"></script>
    <script type="text/javascript" src="js/jquery-autocomplete.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/jquery-autocomplete.css"/>
		<style>
      *{
        font-family: verdana;
        font-size: 12px;
      }
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 1000px;
        height: 500px;
      }
      .ui-menu .ui-menu-item{
        text-align: left;  
        font-weight: normal;
      }
      .ui-menu .ui-menu-item a.ui-state-hover{
        border: 1px solid red; 
        background: #FFBFBF; 
        color: black;
        font-weight:bold;
      }
    </style>

      <script type="text/javascript">

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-33.866584707354, 151.2188931196655),
        zoom: 8,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Read from database
      downloadUrl("genxml.php", function(data) {
        var xml = data.responseXML;
        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 type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          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);
      });
    }

    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);
    }

    function doNothing() {}

    //]]>

  </script>
   
    <script type="text/javascript">      
      $(function(){
          
          $('#map').gmap3();

          $('#address').autocomplete({
            source: function() {
              $("#map").gmap3({
                action:'getAddress',
                address: $(this).val(),
                callback:function(results){
                  if (!results) return;
                  $('#address').autocomplete(
                    'display', 
                    results,
                    false
                  );
                }
              });
            },
            cb:{
              cast: function(item){
                return item.formatted_address;
              },
              select: function(item) {
                $("#map").gmap3(
                  {action:'clear', name:'marker'},
                  {action:'addMarker',
                    latLng:item.geometry.location,
                    map:{center:true, zoom:14}
                  }
                );
              }
            }
          })
          .focus();
          
      });
	  </script>

  </head>

  <body onload="load()">
      <input type="text" id="address" size="60" ><br/>
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>

</html>

Offline

Ads
(server costs 27.50€ per month)


Board footer

Powered by FluxBB