2012-05-19 2 views
0

이것은 내 페이지에서 위도와 경도로 포인터 데이터베이스를 사용하여지도를 표시하는 데 사용하는 코드입니다.JSON을 사용하여이 맵을 그레이 스케일로 얻으려면 어떻게해야합니까?

이 코드는 Google지도에 표시된대로 일반 이미지를 표시하지만 그레이 스케일지도가 필요하면 Google API로 이미지를 완성하고 JSON 코드를 얻지 만 걱정되는 im는 json 코드를 사용하는 방법입니다. 그레이 스케일로 표시됩니다.

이 내 페이지에 존재하는 스크립트입니다 : -이 구글에서 JSON 코드가

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfJRXkzFVohAp-Okxjr5B7xR_ljEFASla9K2hAbTooXc5TaM12hShF8opt9JtUXJpFbuViIHs05-CNg" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function(){ 
    if (GBrowserIsCompatible()) { 
     var latitude = <?php echo $store_details->latitude; ?>; 
     var longitude = <?php echo $store_details->longitude; ?>;         
     var map = new GMap2(document.getElementById("map")); 
     map.setCenter(new GLatLng(latitude,longitude),13);   
     var marker = new GMarker(new GLatLng(latitude,longitude)); 
     map.addOverlay(marker); 

    } 
}); 
//]]> 
</script> 

이것은 JSON 코드 매핑되어 아래 :

[ { stylers: [ { saturation: -100 }, { visibility: "on" } ] } ] 

답변

1

당신은 버전 2를 사용하는을 API는 스타일지도가 없습니다. 이 기능을 사용하려면 버전 3을 사용해야합니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script> 

var map; 
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455); 

var MY_MAPTYPE_ID = 'Greyscale'; 

function initialize() { 

    var graystyle = [ 
    { 
     featureType: "all", 
     elementType: "all", 
     stylers: [ { saturation: -100 }, { visibility: "on" } ] 
    } 
    ]; 

    var mapOptions = { 
    zoom: 12, 
    center: brooklyn, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
    }, 
    mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    var styledMapOptions = { 
    name: "Greyscale" 
    }; 

    var grayMapType = new google.maps.StyledMapType(graystyle, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, grayMapType); 
} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width: 640px; height: 480px;"></div> 
</body> 
</html> 
: 버전 3은 확실히

구글의 rather garish example에서 적응

그레이 스케일지도 2013 년 5 월에 작동이 중지됩니다 버전 3, 버전 2 개 프로젝트를 사용해야 버전 2의 새로운 프로젝트는 매우 다르다