Your address will show here +12 34 56 78

Home Forums WP RESIDENCE – Real Estate WordPress Theme FORUM Google Maps Transit Layer

This topic contains 4 replies, has 4 voices, and was last updated by  burmar 2 years, 1 month ago.

  • Author
    Posts
  • #104620

    hrenyc
    Participant

    I am looking to add the transit layer into the google maps on my page. The page is for New York City and the subway locations are very important to showcase.

    The following link is the directions for adding the TransitLayer to the existing JS file I have.
    https://developers.google.com/maps/documentation/javascript/examples/layer-transit

    I went to JS/google_js/google_map_code.js to edit but it doesn’t seem to be working.

    I changed the code to look like this……

    /*global google */
    /*global Modernizr */
    /*global InfoBox */
    /*global googlecode_regular_vars*/
    var gmarkers = [];
    var current_place=0;
    var actions=[];
    var categories=[];
    var vertical_pan=-190;
    var map_open=0;
    var vertical_off=150;
    var pins='';
    var markers='';
    var infoBox = null;
    var category=null;
    var width_browser=null;
    var infobox_width=null;
    var wraper_height=null;
    var info_image=null;
    var setMap()=null;
    var map;
    var found_id;
    var selected_id         =   '';
    var javamap;
    var oms;
    
    function initialize(){
        "use strict";
    
        var mapOptions = {
                 flat:false,
                 noClear:false,
                 zoom: parseInt(googlecode_regular_vars.page_custom_zoom),
                 scrollwheel: false,
                 draggable: true,
                 center: new google.maps.LatLng(googlecode_regular_vars.general_latitude, googlecode_regular_vars.general_longitude),
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                 streetViewControl:false,
                 mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP]
                },
                disableDefaultUI: true
               };
               
        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);       
           
        
        if(  document.getElementById('googleMap') ){
            map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
        }else{
            return;
        }
        google.maps.visualRefresh = true;
        
      
        if(mapfunctions_vars.show_g_search_status==='yes'){
            set_google_search(map)
        }
      
    
        if(mapfunctions_vars.map_style !==''){
           var styles = JSON.parse ( mapfunctions_vars.map_style );
           map.setOptions({styles: styles});
        }
      
      
      
      
        
        google.maps.event.addListener(map, 'tilesloaded', function() {
         jQuery('#gmap-loading').remove();
        });
    
        if (Modernizr.mq('only all and (max-width: 1025px)')) {
            map.setOptions({'draggable': false});
        }
    
        
        if(googlecode_regular_vars.generated_pins==='0'){
            pins=googlecode_regular_vars.markers;
            markers = jQuery.parseJSON(pins);
        }else{
            if( typeof( googlecode_regular_vars2) !== 'undefined' && googlecode_regular_vars2.markers2.length > 2){          
                pins=googlecode_regular_vars2.markers2;
                markers = jQuery.parseJSON(pins);                 
            }           
        }
        
    
        
        if (markers.length>0){
            setMarkers(map, markers);
        }
        
        if(googlecode_regular_vars.idx_status==='1'){
            placeidx(map,markers);
        }
    
        //set map cluster
        map_cluster();
       
        /*function scrollwhel(event){
            if(map.scrollwheel===true){
                event.stopPropagation();
            }
        }
        
        google.maps.event.addDomListener(document.getElementById('googleMap'), 'mousewheel', scrollwhel);
        google.maps.event.addDomListener(document.getElementById('googleMap'), 'DOMMouseScroll', scrollwhel);
        */
        
        oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true,keepSpiderfied :true,legWeight:3});
        setOms(gmarkers);
     
    }
    ///////////////////////////////// end initialize
    /////////////////////////////////////////////////////////////////////////////////// 
     
     
    if (typeof google === 'object' && typeof google.maps === 'object') {                                         
        google.maps.event.addDomListener(window, 'load', initialize);
    }
    
      

    I added ‘var setMap()=null;’ and ‘ var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map); ‘

    Please let me know if I did this incorrectly. Any help or pointing towards the right direction would be greatly appreciated. Thank you.

  • #104744

    hrenyc
    Participant

    Does anyone have any suggestions for this? It would be greatly appreciated.

  • #108043

    Anna
    Keymaster

    Hi,
    You used the right instructions but in the wrong place – you need to create the tranzit layer after google map is initialized not before.

    That beign said you need to cut
    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);

    and paste it after
    google.maps.visualRefresh = true;

    (you start the google map with map = new google.maps.Map(document.getElementById(‘googleMap’), mapOptions); )

    Thanks

  • #110982

    naturalstate
    Participant

    Did you get this to work?

  • #121096

    burmar
    Participant

    henryc,

    Can you let me know if you made it to work? I’m trying to accomplish similar with county boundaries.

    Thanks!

You must be logged in to reply to this topic.