Search code examples
javascriptjsongoogle-maps-api-3mapstraction

Mapstraction and JSON Google map style


I am using mapstraction v2. When selecting Google as a provider, I need to stylize a google map v3. I have used google's nice 'styled maps wizard' tool that produces the JSON object to pass to the style property of the google.maps.MapOptions object. The tool produces JSON that looks like something this { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#404040" } ] }, etc...

However, I cannot figure out if / how to re-format this json object so that mapstraction can load it like this:

    mapstraction = new mxn.Mapstraction('mymap', 'googlev3', true);
    json = { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "visibility": "on" },{ "color": "#404040" } ] }
    mapstraction.addJSON(json);

Even better, I would really like to know if I can use mxn.util.loadScript to fetch the json data directly from a url.

Since I am totally new to web mapping, I may be trying to do something with mapstraction that is just not possible right now. Do you think so? I searched through the archives and I noticed that the json looks different but I cannot find an answer that explains how to re-format it to make it usable by mapstraction. Do you know how to do this?


Solution

  • Does this example help?

    Extract from http://mapstraction.appspot.com/#json

    json = {
        features: [{
            "type": "Feature",
            "toponym": null,
            "title": "DSC_0023.JPG",
            "author": "ugef",
            "id": 1930723,
            "description": "",
            "categories": "california unitedstates sanjose eyefi",
            "geometry": {
                "type": "Point",
                "coordinates": [-121.896263,37.328655]
            },
            "properties": 
            {
                "icon_shadow": "http://mapstraction.appspot.com/images/blank.png",
                "icon_shadow_size": [0,0],
                "line_color": "",
                "icon": "http://mapstraction.appspot.com/images/flickr_marker.png",
                "line_opacity": 1.0,
                "pubdate": "2008/07/03 20:14:01 +0000",
                "line_width": 1.0,
                "poly_color": "",
                "icon_size": [16,16]
            },
            "source_id": 1000014
        }
        ]
    }
    // 
    mapstraction.addJSON(json);