How to add google map to custom field

Question

I need to show a map throw custom field Here's my code, the field name is 'show_map'

<div id="view1">
                <?php
                $location = get_field('show_map', 'options');
                if( ! empty($location) ):
                ?>
                <div id="map" style="width: 100%; height: 350px;"></div>
                <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>

                <script type="text/javascript">
                  //<![CDATA[
                    function load() {
                    var lat = <?php echo $location['lat']; ?>;
                    var lng = <?php echo $location['lng']; ?>;
                // coordinates to latLng
                    var latlng = new google.maps.LatLng(lat, lng);
                // map Options
                    var myOptions = {
                    zoom: 9,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                   };
                //draw a map
                    var map = new google.maps.Map(document.getElementById("map"), myOptions);
                    var marker = new google.maps.Marker({
                    position: map.getCenter(),
                    map: map
                   });
                }
                // call the function
                   load();
                //]]>
                </script>
                <?php endif; ?> 

the problem is it doesn't show in my page

Answer 1

It looks like you're missing some code according to the ACF docs - see example under "Required CSS & JS" - http://www.advancedcustomfields.com/resources/google-map/

Sadly - this page of the ACF documentation may be out of date. According to google maps API docs - you'll need to create an API key for all their APIs (Embed, JS, etc)

For more info please visit - https://developers.google.com/maps/