How do i get this Map in greyscale using JSON?

StackOverflow https://stackoverflow.com//questions/10664456

Domanda

This is the code i'm using in my page to display maps with pointers database as latitude and longitude.

This Code displays the normal image as represented in the google maps, But as i need the grayscale map, itried it with the google api and got the JSON code but im worried, how to use up the json code that the map displays in Greyscale.

This is the script present in my page:- below this is the JSON code from Google maps

<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>

This is the JSON code:

[ { stylers: [ { saturation: -100 }, { visibility: "on" } ] } ]
È stato utile?

Soluzione

You are using Version 2 of the API, which does not have styled maps. You need to use Version 3 to make that functionality available. Version 3 is quite different from Version 2. New projects should definitely use Version 3, and Version 2 projects will stop working in May 2013.

Greyscale map adapted from Google's rather garish example:

<!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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top