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.
