Hi there,
There are a few different ways of doing this.
The best advice I can give you is to start with just getting a very basic map to display on your page to simplify things. Once you have that working, update the google maps code with this more advanced map.
So, to make the map display, you need to do a few things:
– Enqueue the Google Maps JS, for example:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
– Have the necessary css for your map container, for example:
<style>
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
– Your map canvas in your template, for example:
<div id="map-canvas"></div>
– Load the map (javascript in your wordpress template), for example
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Anyway, this is the basic gist of getting custom maps to display in a wordpress template. It’s got a few different parts, so it takes some programming ability.
Depending on what you need, you could look into what kinds of plugins are available that use draggable directions.
