asked on

Styled Google Maps

I'm trying to change the map colour in the right nav on this page according to Google's specifications here under the 'Style Array Example' with grey features and blue roads.

I've tried everything it says, but still can't get it to work.

Here's the HTML:

          <div style="width:100%;height:215px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rs("ca_postcode"))%>&zoom=14&size=350x350&maptype=roadmap&markers=color:ORANGE|label:A|<%=server.URLEncode(""&rs("ca_postcode"))%>&sensor=false) center no-repeat;"></div>

Open in new window

Tom Beck

This is very similar to the question you posted here.

Here is a working example based on that question's posted code, incorporating the code you posted. I changed the inline server side code to real numbers for the sake of the example.

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps -- Styled Map</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head> 
<body onLoad="initialize()"> 
      <div id="map-canvas" style="width:100%;height:215px;background:url(http://maps.google.com/maps/api/staticmap?center=55.6468,37.581&zoom=14&size=350x350&maptype=roadmap&markers=color:ORANGE|label:A55.6468,37.581&sensor=false) center no-repeat;"></div>

<script type="text/javascript">
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}
</script>
          
</body> 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

I've requested that this question be closed as follows:

Accepted answer: 500 points for tommyBoy's comment #a39612166

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

UName10

ASKER

Valid answer for a complex question