WordPress.org

Ready to get started?Download WordPress

Forums

Google Map with FusionLayer broken in WP template but works on front page? (1 post)

  1. ProjectCommonwealth
    Member
    Posted 1 year ago #

    Hey there.

    So I have a verified working script using Google Maps that works fine on the front page my my WP site. However, I've had no luck moving it to a page created through the WP post function. Does anyone know why this script doesn't function on a WP page but works in regular HTML?

    Here's a link to the broken page: http://projectcommonwealth.com/interactive-map/

    Thanks so much!

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    
    <p style="text-align:center">
    Address: <input id="address" size="60" onchange="showDistrict()" /> <input type="button" value="Show" onclick="showDistrict()" /></p>
    
    <div id="mapBox">
    <div class="SenateMapBox">
    <div id="SenateDistricts" class="map"></div>
    </p><p><div style="border: .1em dotted #900;"><h2 style="text-align:center">Senatorial District</h3></p></div>
    </div>
    <div class="AssemblyMapBox">
    <div id="AssemblyDistricts" class="map"></div>
    </p><p><div style="border: .1em dotted #900;"><h2 style="text-align:center">Assembly District</h3></p></div>
    
    </div>
    
    </div></p>
    
    <p>
    
    <style>
    #mapBox {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
    }
    
    .SenateMapBox {
    float: left;
    }
    
    .AssemblyMapBox {
    float: right;
    }
    
    .dist_type {
    margin-left: 10px;
    }
    
    .map {
    border: 1px solid #ccc;
    height: 400px;
    width: 320px;
    }
    </style>
    
    <!-- Load Maps API -->
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAVijH15qQ6cyVkNEIE8Jt8M12CIQ2CDK0&sensor=false"></script>
    <script type="text/javascript">
    var commonCenter = new google.maps.LatLng(38.56, -121.40);
    var commonZoom = 7;
    
    var geocoder = new google.maps.Geocoder();
    
    var SenateDistricts;
    var SenateDistrictQuery;
    var SenateDistrictLayer;
    var SenateLocationMarker;
    var SenateInfoWindow;
    
    var AssemblyDistricts;
    var AssemblyDistrictQuery;
    var AssemblyDistrictLayer;
    var AssemblyLocationMarker;
    
    setupSenateMap();
    setupAssemblyMap();
    
    <!-- Set up Senate map with common variables defined above -->
    
    function setupSenateMap () {
    SenateDistricts = new google.maps.Map(document.getElementById("SenateDistricts"), {
    zoom: commonZoom,
    center: commonCenter,
    streetViewControl: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    google.maps.event.addListener(SenateDistricts, 'drag', function() {
    AssemblyDistricts.panTo(SenateDistricts.getCenter());
    });
    
    google.maps.event.addListener(SenateDistricts, 'zoom_changed', function() {
    AssemblyDistricts.setZoom(SenateDistricts.getZoom());
    });
    
    SenateLocationMarker = new google.maps.Marker();
    
    SenateDistrictQuery = {
    select: 'geometry',
    from: '1AGljz8bOZzoeXkrEiOM3gw1u5Jio1VEV6iqjATs'
    };
    
    SenateDistrictLayer = new google.maps.FusionTablesLayer({
    query: SenateDistrictQuery
    });
    }
    
    function setupAssemblyMap () {
    AssemblyDistricts = new google.maps.Map(document.getElementById("AssemblyDistricts"), {
    zoom: commonZoom,
    center: commonCenter,
    streetViewControl: false,
    zoomControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    google.maps.event.addListener(AssemblyDistricts, 'drag', function() {
    SenateDistricts.panTo(AssemblyDistricts.getCenter());
    });
    
    google.maps.event.addListener(AssemblyDistricts, 'maptypeid_changed', function() {
    SenateDistricts.setMapTypeId(AssemblyDistricts.getMapTypeId());
    });
    
    AssemblyLocationMarker = new google.maps.Marker();
    
    AssemblyDistrictQuery = {
    select: 'geometry',
    from: '14k_sD3LSWrIXdd9M2T2K8zGfqKtNRlDuXPlYkAo'
    };
    
    AssemblyDistrictLayer = new google.maps.FusionTablesLayer({
    query: AssemblyDistrictQuery
    });
    }
    
    function showDistrict () {
    var address = jQuery('#address').val();
    
    // reference: https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult
    
    if (address !== '') {
    geocoder.geocode({'address': address}, function(results, status) {
    if (results.length > 0) {
    SenateDistricts.panTo(results[0].geometry.location);
    SenateLocationMarker.setPosition(results[0].geometry.location);
    SenateLocationMarker.setMap(SenateDistricts);
    
    AssemblyDistricts.panTo(results[0].geometry.location);
    AssemblyLocationMarker.setPosition(results[0].geometry.location);
    AssemblyLocationMarker.setMap(AssemblyDistricts);
    
    // The 10 below = 10 meters ex. AND ST_INTERSECTS(Address, CIRCLE(LATLNG(37.3242,-121.9806),5000))
    
    var whereClause = 'ST_INTERSECTS(geometry, CIRCLE(LATLNG('+ results
    [0].geometry.location.lat() +',' + results[0].geometry.location.lng() +'), 10))';
    
    AssemblyDistrictQuery.where = whereClause;
    SenateDistrictQuery.where = whereClause;
    
    AssemblyDistrictLayer.setOptions({
    query: AssemblyDistrictQuery,
    map: AssemblyDistricts
    });
    
    SenateDistrictLayer.setOptions({
    query: SenateDistrictQuery,
    map: SenateDistricts
    });
    
    SenateInfoWindow = new google.maps.InfoWindow({
    content: SenateDistrictQuery});
    
    google.maps.event.addListener(SenateLocationMarker, 'click', makeCallback(SenateDistricts));
    
    function makeCallback(SenateDistricts) {
    return function () {
    SenateInfoWindow.open(SenateDistricts, SenateLocationMarker);
    };
    }
    
    }
    
    });
    
    } else {
    // Erase the layers and the markers...
    AssemblyDistrictLayer.setMap(null);
    SenateDistrictLayer.setMap(null);
    AssemblyLocationMarker.setMap(null);
    SenateLocationMarker.setMap(null);
    }
    
    SenateInfoWindow.open(SenateDistricts, SenateLocationMarker);
    
    }
    
    </script>
    </div>
    </div>

    [ Please do not bump, that's not permitted here. ]

Topic Closed

This topic has been closed to new replies.

About this Topic

  • RSS feed for this topic
  • Started 1 year ago by ProjectCommonwealth
  • This topic is not resolved
  • WordPress version: 3.4.1