Skip to content

Instantly share code, notes, and snippets.

@traversal
Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save traversal/5c6af20903555a13c35c to your computer and use it in GitHub Desktop.
Save traversal/5c6af20903555a13c35c to your computer and use it in GitHub Desktop.
Map Marker
<!DOCTYPE html>
<html>
<head>
<?php
// Requires gmaps.js from GitHub:
// http://hpneo.github.io/gmaps/
wp_enqueue_script('googlemaps', 'http://maps.google.com/maps/api/js?sensor=true');
// Assumes you've installed gmaps.js into "js" folder in your theme
wp_enqueue_script('gmaps', get_template_directory_uri().'/js/gmaps.js');
wp_head();
?>
<style type="text/css">
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="map">
</div>
<?php
// Assumes your post has a field set called "details" and a field called "map". Change these to your own names!
$loc = $wf->details->location;
?>
<script>
var map = new GMaps({
el: '#map',
lat: <?php echo $loc->lat() ?>,
lng: <?php echo $loc->lng() ?>,
zoom: <?php echo $loc->zoom ?>
});
map.addMarker({
lat: <?php echo $loc->lat() ?>,
lng: <?php echo $loc->lng() ?>,
title: 'This is my marker'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment