how to and in the front end the custom field location addon with the google mas api V3

advance custom field location addon google maps v3

<?php
/*
  Template Name: INICIO
*/
?>

<style>
      #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<?php get_header(); ?>
		<?php echo do_shortcode('[slider id=62 name="indexbanner"]'); ?>
		<?php echo do_shortcode('[print_thumbnail_slider]'); ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile;?>
	<script>
		var map;
		var myLatLang = new google.maps.LatLng( <?php  $location = get_field('google_maps'); echo $location['coordinates']; ?>);
		function initialize() {
	  		var mapOptions = {
	    		zoom: 8,
	    		center: myLatLang,
	    		mapTypeId: google.maps.MapTypeId.ROADMAP
	  		};
	  		map = new google.maps.Map(document.getElementById('map-canvas'),
	      	mapOptions);
	      	var marker = new google.maps.Marker({
	     		position: myLatLang,
	      		map: map,
	      		title:"Hello World!"
	  		});
		};
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	<div id="map-canvas"></div>

<?php get_footer(); ?>