3

I am using google map's FusionTablesLayer and polygon to set layers of USA states. I am having problem in integrating following 2 things :

a) Set zoom property, so map will fit to the screen. I know map doesn't accept zoom value in decimal. Is there any other way to do this?

b) Positioning labels (i.e state name) depending on the area of state. For eg. California state label should be on the polygon whereas New Jersey state label should be below the polygon area.

Expected output :

enter image description here

Current State :

enter image description here

My code :

var map;
var clientId = '{CLIENT_ID}';
var apiKey = '{API_KEY}';
var scopes = 'https://www.googleapis.com/auth/fusiontables';
var zoom = 4;
var labels = [];
var USAStates = '';
var infobox = {};
jQuery.get( "http://recruiters.wpsitesbuilder.com/wp-json/myplugin/v1/firms_data", function( data ) {
    USAStates = jQuery.parseJSON(data);
}).done(function( data ) {
    function initMap() {
        var latlng = new google.maps.LatLng(37.09024, -95.712891);
        var myOptions = {
            zoom: zoom,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            disableDoubleClickZoom: false,
            draggable: true,
            keyboardShortcuts: true,
            panControl:true,
            zoomControl:false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            mapTypeControl:false,
            scaleControl:false,
            scrollwheel: false,
            streetViewControl:false,
            overviewMapControl:true,
            rotateControl:false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        };
        var styles=[{featureType:"administrative",elementType:"all",stylers:[{hue:"#000000"},{lightness:-100},{visibility:"off"}]},{featureType:"landscape",elementType:"all",stylers:[{color:"#2c8ecd"},{visibility:"on"}]},{featureType:"landscape",elementType:"geometry",stylers:[{saturation:-100},{lightness:-3},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"landscape",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"poi",elementType:"all",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:26},{visibility:"off"}]},{featureType:"road",elementType:"labels",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"off"}]},{featureType:"road.highway",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.highway.controlled_access",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.local",elementType:"all",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"on"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"geometry",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"labels",stylers:[{hue:"#ff0000"},{lightness:-100},{visibility:"off"}]},{featureType:"water",elementType:"geometry",stylers:[{saturation:-100},{lightness:100},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"water",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]}];
        var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
        var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        var tableId = '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw';
        var USAStateslayer = new google.maps.FusionTablesLayer({
            query: {
                select: 'geometry',
                from: tableId
            },
            options: {
                suppressInfoWindows: true
            },
            styles: [{
                polygonOptions: {
                    fillColor: '#ffffff',
                    fillOpacity: 1,
                    strokeColor: '#2c8ecd'
                }
            }],
            clickable: true
        });
        filterMap(USAStateslayer, tableId, map, USAStates);

        USAStateslayer.setMap(map);
        map.setCenter(latlng);

        jQuery.each(USAStates, function(key, value){
            var content = '<div class="infobox-content-container"><span class="state-name">'+value.state+'</span></div>';
            if(value.firms !== undefined) {
                content = '<div class="infobox-content-container"><span class="total-firms">'+value.firms+'</span><br /> Firms <br /> <span class="state-name">'+value.state+'</span></div>';
            }
            infobox = new InfoBox({
                content: content,
                boxStyle: {
                    border: "none",
                    textAlign: "center",
                    backgroundColor:"none",
                    fontSize: "8pt",
                    width: "50px",
                    color: '#000000',
                    'margin-top': "-25px"
                 },
                disableAutoPan: true,
                pane: "floatPane",
                pixelOffset: new google.maps.Size(-25, 0),
                position: new google.maps.LatLng(value.latitude,value.longitude),
                closeBoxURL: "",
                isHidden: false,
                enableEventPropagation: true
            });
            labels.push(infobox);
            labels[labels.length-1].open(map);
        });
    }

    // Filter the map based on checkbox selection.
      function filterMap(layer, tableId, map, USAStates) {

        layer.setOptions({styles:generateStyle(USAStates, map)});

      }

      // Generate a where clause from the checkboxes. If no boxes
      // are checked, return an empty string.
      function generateStyle(USAStates, map) {
        //default-style,gray
        var style=[{
           polygonOptions: {
                fillColor: '#ffffff',
                strokeWeight: 1,
                fillOpacity: 1,
                strokeColor: '#2c8ecd'
            }
        }];

       var styles={
         //open stores
         open:{polygonOptions: {
            fillColor: "#be2026"
          }},
        //closed stores
         closed:{polygonOptions: {
            fillColor: "#fff"
          }}
        };

        var selected={open:[],closed:[]};
        var stores = [];

        if(jQuery('#find-firms-container .selected-firms-list>span').length > 0) {
            jQuery('#find-firms-container .selected-firms-list>span').each(function(){
                var stateName = jQuery(this).text();
                stores.push(stateName);
            });
        }

        //populate the selected-object with the names of the stores
        jQuery.each(stores,function(i,o){
          var storeName = o.replace(/'/g, '\\\'');
            selected['open'].push(storeName);
        });
        //add a style for non-empty properties of the selected-object
        jQuery.each(selected,function(i,o){
           if(o.length){
             style.push(jQuery.extend(styles[i],{where:"'name' IN ('" + o.join("','") + "')"}));
           }
        });
        var i = 0;
        jQuery.each(USAStates, function(key, value){
            var color = '#000000';
            if(jQuery.inArray(value.state, selected.open) !== -1) {
               color = '#ffffff';
            }
            if(labels[i] !== undefined) {
                labels[i].boxStyle_.color= color;
                labels[i].open(map);
            }
            i++;
        });

        return style;
    }

    initMap();
});
  • judging by what you want the output to look like--particularly the custom projection and label positioning--I'd suggest looking at the d3.js library instead of GoogleMaps. Particularly its AlbersUSA projection. Labels would be easy to position manually. – James Conkling Jan 5 '17 at 3:47
-1

Check this out :map.fitBounds

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.