Need help? Check out our Support site, then


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

  1. 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?

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic