Passing an address inside a WordPress post to a Google Map elsewhere on the Page
- by ael_ecurai
Background: My client is building their own WordPress site (using a purchased feature-rich theme), and I'm modifying a child theme as necessary to achieve customizations she wants. The theme comes with a Page template that includes a full-width Google Map across the top, which pulls its marker from a single address set within the Theme Options. It's meant to be used for one main "Contact Us" page.
The client's business has several locations, and she wants each location's page to include such a map. (Example linked below.) It seems that the ideal solution would be the ability to specify an address within a shortcode in the Post, and have that set the map marker.
Here's how the theme makes the map (where $mapAddress is the address from the Theme Options):
<?php
$mapAddress = ot_get_option( 'map_address' );
$mapHeight = ot_get_option( 'map_height' );
$mapContent = ot_get_option( 'map_content' );
?>
<section id="block-map-wrapper">
<div id="block-map" class="clearfix">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
jQuery(document).ready(function(){
// Map Options
var mapOptions = {
zoom: 15,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl: true,
scaleControl: false,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// The Map Object
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var address = "";
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "address" : "<?php echo $mapAddress; ?>" }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
address = results[0].geometry.location;
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: address,
map: map,
clickable: true,
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({ content: "<?php echo $mapContent; ?>" });
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
});
});
</script>
<div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
</div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->
Here's a test page using a custom Page template I've created. Right now it's using the same map code as above.
I've tried creating a shortcode that takes an address attribute and sets it as $mapAddress, but that didn't work. I believe it's because the map is already loaded by the time the Loop gets parsed. How can I tell Maps to "come back" to the post to get the proper address?
My specialty lies in HTML & CSS, but Javascript befuddles me fairly easily, so please be explicit when explaining implementation.
Bonus: A further goal is to have the locations' parent Page also include such a map, but have multiple markers representing the multiple locations. When taking more than one location, Google Maps only accepts latitude/longitude. I don't want my client to be concerned with coordinates, so I know there's got to be something I can do with the geocoding service so she can just input a list of addresses instead (into the same, or similar, shortcode solution developed for my main question). But I am extra-clueless about how to do that.
