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.
