Googleマップのカテゴリ

私は解決できなかった問題があります。Googleマップのカテゴリ

私はGoogleマップを読み込むための小さなスクリプトを開発しました。このスクリプトでは、HTML 5を使用して現在地を特定し、マップ上のいくつかの場所を表示します。これらはMySQLデータベースから読み込まれる場所です。

問題は何とかカテゴリ別にフィルタリングする必要があることです。 PHPファイルはMySQLデータベースからXMLファイルを生成します。問題は、私は例えばリンクをクリックしたときのカテゴリを変更するに行きたいということで、何か

downloadUrl("file.php?cat=something", function(data) { 
     var markers = data.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
     var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("address"), markers[i].getAttribute("type"), latlng); 
     } 
     });

= file.phpカテゴリ：？

私はカテゴリを選択するには、次のパラメータを渡すことができます。

左と右のカテゴリの地図があるとします。カテゴリをクリックすると、マップは現在のカテゴリにマークされた場所を自動的に削除し、新しいカテゴリのみを表示します。

結論として、file.phpという部分は？ Category = something、値 "something"は動的に変更する必要があります。

私はそれがJqueryでできると思いますが、私は正確にはわかりません。私はいくつかの方法を試して、まだそれをしない。

は、私はちょうど例えば、この部分の値を変更すると、マップが自動的に他のカテゴリを無効にすること方法が必要です：

var something = doctor; 
downloadUrl("file.php?cat="+something, function(data) {

これが私のスクリプトの完全なコードです：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocalización</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <link href="estilo.css" rel="stylesheet" type="text/css"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="util.js"></script> 

    </head> 
    <body onload="initialize()"> 
    <div id="info"></div> 
     <div id="map_canvas" style="width: 780px; height: 600px; margin: 0 auto;"></div> 

    <script type="text/javascript"> 
     var map; 
     var infowindow; 
     var geocoder; 
     var marker; 

     function initialize() { 
     var myOptions = { 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

     downloadUrl("phpsqlajax_genxml.php?cat=doctor", function(data) { 
     var markers = data.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
     var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("address"), markers[i].getAttribute("type"), latlng); 
     } 
     }); 

     function createMarker(name, address, type, latlng) { 

     if(type=="doctor"){ 
     var image = 'clinicas-y-hospitales.png'; 
     }else{ 
     var image = 'carabineros-y-seguridad.png'; 
     } 

     var contentString = '<h2>'+name+'</h2> <br /><p>'+address+'</p>'; 

     var marker = new google.maps.Marker({position: latlng, map: map, icon: image}); 
     google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
      infowindow = new google.maps.InfoWindow({content: contentString, maxWidth: 200}); 
      infowindow.open(map, marker); 
     }); 
     return marker; 
     } 

     geocoder = new google.maps.Geocoder(); 

     // Try HTML5 geolocation 
     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude); 
      map.setCenter(pos); 

     geocoder.geocode({'latLng': pos}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     if (results[1]) { 
      marker = new google.maps.Marker({ 
       position: pos, 
       map: map 
      }); 

      infowindow = new google.maps.InfoWindow({content: '<p><strong>Usted está aquí:</strong> '+results[1].formatted_address+'</p>'}); 
      infowindow.open(map, marker); 

      document.getElementById('info').innerHTML = results[1].formatted_address; 
     } 
     } else { 
     alert("Geocoder failed due to: " + status); 
     } 
     }); 

      }, function() { 
      handleNoGeolocation(true); 
      }); 

     } else { 
      // Browser doesn't support Geolocation 
      handleNoGeolocation(false); 
     } 
     } 

     function handleNoGeolocation(errorFlag) { 
     if (errorFlag) { 
      var content = 'Error: La geolocalización ha fallado.'; 
     } else { 
      var content = 'Error: Tu navegador no soporta geolocalización.'; 
     } 

     var options = { 
      map: map, 
      position: new google.maps.LatLng(60, 105), 
      content: content 
     }; 

     var infowindow = new google.maps.InfoWindow(options); 
     map.setCenter(options.position); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

    </body> 
</html>

スクリプトの実行を確認するには

はここにある：

http://pruebas.davidbanner.cl/geo/index.php

私は何をする必要があるかの同様の例はここにある：

http://mapas.vinadelmarchile.cl/index.php

は私のアイデアを与えるかのコードを支援することができます誰にもありがとうございました。

ご挨拶。

出典

2012-01-27 Nacho Sarmiento