Google지도 사이드 바

아래 코드를 사용하여 MySQL 데이터베이스에 저장된 각 위치의 아이콘을 보여줍니다.Google지도 사이드 바

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>All Locations</title> 
     <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      0: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      1: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:6, 
      mapTypeId: 'roadmap' 
      }); 

      var infoWindow = new google.maps.InfoWindow; 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var locationname = markers[i].getAttribute("locationname"); 
      var address = markers[i].getAttribute("address"); 
      var finds = markers[i].getAttribute("finds"); 
      var totalfinds = markers[i].getAttribute("totalfinds"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("osgb36lat")), 
      parseFloat(markers[i].getAttribute("osgb36lon"))); 
      var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>"; 
      var icon = customIcons[totalfinds] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: address, 
      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> 
      </head> 

      <body onLoad="load()"> 
       <div id="map"></div> 
      </body> 
      </html>

사용자가 사이드 바의 위치를 클릭하면 지금 사이드 바를 추가하여 조금 더 페이지의 기능을 확장 할 수 있도록하고 싶습니다

는, 이에는 노란색 배경으로 선택을 강조 및 그런 다음지도를 정보 표시창을 여는 관련 마커의 중심으로 이동합니다. 사용자가 마커를 클릭해야하는 경우 정보 창을 열고 측면 배경의 관련 위치를 다시 노란색 배경으로 강조 표시하고 싶습니다.

언젠가 이것을 연구하고 있는데 여기에 http://econym.org.uk/gmap/example_map2c.html과 같은 사이드 바의 정확한 유형을 발견했지만 문제는 이것이 Google지도 API의 v2에 있다는 것입니다.

나는이 일을하기 위해 내가해야 할 일을 누군가에게 보여줄 수 있는지 여부를 궁금해했습니다.

업데이트 된 코드

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>All locations</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

</head> 
<div id="map_canvas" style="width: 900px;height: 600px;"> 
</div> <div id="locations"></div> 

<body onload="showLocations()"> 

<script> 
    var map; 
var markers = new Array(); 


function showLocations() { 
downloadUrl("phpfile.php", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; i++) { 
     var locationname = markers[i].getAttribute("locationname"); 

     markerId = "id_"+i; 

     location_list += "<div id="+markerId+">"+locationname+"</div>"; 
    }   

    document.getElementById("location_list").innerHTML = location_list; 

    initialize_member_map("lang") 
    }); 
} 

function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("map-canvas"), { 
    center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
    zoom: 6, 
    mapTypeId: 'roadmap' 
    }); 

    var xml = data.responseXML; 

    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     var infoWindow = new google.maps.InfoWindow; 
     var locationname = markers[i].getAttribute("locationname"); 
     var address = markers[i].getAttribute("address"); 
     var locationid = markers[i].getAttribute("locationid"); 
     var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("osgb36lat")), 
      parseFloat(markers[i].getAttribute("osgb36lon"))); 
     var html = "<b>" + locationname + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     locationid: locationid 
     }); 

     markerId = "id_"+i; 
     bindInfoWindow(gmarker, map, infoWindow, html, markerId); 

    }   
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 


} 

function scrollToMarker(index) { 
    map.panTo(gmarkers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html, markerId) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    markerObj = document.getElementById(markerId); 
    google.maps.event.addDomListener(markerObj, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    map.panTo(marker.getPosition()); 
    }); 

} 

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> 
</body> 
</html>

출처

2011-08-15 IRHM

나의 추천 거기 첫번째 documentation는 다음 예제와 튜토리얼, 라이브 예를 go to google playgorund을 찾을 수 있습니다 찾고 있습니다. 완전히 사이드 바를 만들 수 있습니다. 사이드 바가지도의 안쪽이나 바깥쪽에 있을지 고려해야 할 유일한 곳입니다. 놀이터의 링크에서 나는 당신을 자신 만의 컨트롤로 만드는 예입니다. 데이터를 저장하려면 아약스에서 비동기 호출로 위치를 저장하는 방법을 이해해야합니다.

출처

2011-08-15 15:32:58 Jorge

안녕하세요. 내 게시물에 답장하는 시간을내어 주셔서 감사합니다. 이미 Google 사이트의 문서와 인터넷에서 검색 할 수있는 많은 예제를 보았습니다. 초보자의 관점에서 포괄적 인 내용을 찾았지만 이해하기가 어려웠습니다. 그래서 내가 여기에 오는 이유입니다. 친절합니다. Chris – IRHM

안녕하세요, 누군가 제발 나를 도울 수 있는지 궁금합니다. 나는이 포럼 (http://stackoverflow.com/questions/4904549/open-infowindow-of-specific-marker-from-outside-google-maps-v3)에서 나의 문제에 대한 해결책이되기를 희망했다. 원본 데이터를 업데이트하여 내 데이터에 맞게 수정했습니다. 그러나 이것을 실행하면 33 행 7 문자에서 다음과 같은 오류가 발생합니다. '원본과 비교해 보았는데 문제가 무엇인지 알 수 없습니다. 아마도 누군가가 내가 잘못 가고있는 곳을보기 위해 이걸 보셔도 될까요? 많은 감사와 크리스 안부 Logged – IRHM

Google지도 사이드 바

답변

관련 문제