Google Map broken in WordPress template but works on frontpage.php?

  • Author
    Posts
  • #980890

    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?

    <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>

    #981006

    supportbot
    Member

    You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

The topic ‘Google Map broken in WordPress template but works on frontpage.php?’ is closed to new replies.