0

i m making a plugin in which, custom type posts are used, for the Location Custom type, how can i show a Google map for any location. The Output will be shown as enter image description here

  • 2
    How? Writing a lot of code. Please, show what you already have and explain why it's not working. – brasofilo Oct 3 '13 at 12:48
  • i have only created a meta boxes for that custom fields, i cant understand what i have to do? this is the meta box desgin for that custom type post – Moaz Ateeq Oct 3 '13 at 12:55
  • 1
    did you try to google it ? google got best examples .. search for geocoding – codepixlabs Oct 3 '13 at 14:53
1

$prop_mapaddress contains your textfield value:

<?php 
    if(isset($prop_mapaddress)) {
        global $post;
        global $wpdb;

        $fromat_address = trim($prop_mapaddress);
        $fromat_address = str_replace(" ","+",$fromat_address);
        $address_obj = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?address=".$fromat_address."&sensor=false");
        $address_obj =json_decode($address_obj);
        $latitude = $address_obj->results[0]->geometry->location->lat;
        $longitude = $address_obj->results[0]->geometry->location->lng;            
    ?>       
        <script>        
            var geocoder;       
            var map;      
            var lat = "<?php echo $latitude ?>";       
            var lng = "<?php echo $longitude;  ?>";

            function initialize() {       
                geocoder = new google.maps.Geocoder();       
                var latlng = new google.maps.LatLng(lat, lng);       
                var mapOptions = {        
                    zoom: 15,        
                    center: latlng,        
                    mapTypeId: google.maps.MapTypeId.ROADMAP       
                }        
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);        
            } // map-convas would be id of div you want to show your map in  

            google.maps.event.addDomListener(window, 'load', initialize);       
        </script>      
        <?php        
    }
?>

Also don't forget to enqueue Google API script before actually loading map:

wp_enqueue_script('google-map-api','https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.