CODEWITHSUNDEEP
google-mapsoverlay
Paul
Paul

Reputation: 80

Google map tiles - streets and labels overlay with style?

I have a google map where I insert a custom layer on top of a map and then add the google streets and labels on top of that. I've been searching around to see if there is any way to stylize the streets and labels overlay as you would the roadmap.

So I have this:

var myStyle = [
{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
    { visibility: "simplified" }
    ]
},{
    featureType: "road.highway",
    elementType: "all",
    stylers: [
      { visibility: "simplified" }
    ]
}
];

var myTileLayer = {
    getTileUrl: function(coord, zoom) {
        return "myTiles.php?" +
        "z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var labelTiles = {
    getTileUrl: function(coord, zoom) {
        return "http://mt0.google.com/vt/v=apt.116&hl=en-US&" +
        "z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var googleLabelLayer = new google.maps.ImageMapType(labelTiles);

var mapOptions = {
    mapTypeControlOptions: {
     mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
   },
    zoom: 9,
    center: map_center,
    mapTypeId: 'mystyle'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
map.overlayMapTypes.insertAt(0, myTileLayer);
map.overlayMapTypes.insertAt(1, googleLabelLayer);

Anybody know?

Upvotes: 2

Views: 3062

Answers (1)

Trott
Trott

Reputation: 70163

Yes, you can style the streets and labels, at least to a limited extent. For example you can change the roads green like this:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { hue: "#3bff00" }
    ]
  }
]

Use the Google Maps API Styled Map Wizard at http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html to play around with different settings. It will produce the code you need to replicate the style as well. It may also help you identify things you want to do that the API doesn't support. For example, I don't believe there is currently a way to make the labels italics. (And if there is, OK fine, but you get my point.)

One other thing: Maps API v3.5 came out not too long ago. You may want to check the release notes or announcement or whatever just in case there are now features available that don't show up in the wizard for whatever reason.

Upvotes: 1

Related Questions