0

I want to create dynamic google map with iframe when customer can add address in custom field suit the google map automatically generate the custom field suit value into location . how can its possible.

1 Answer 1

1

Step one: Familiarize yourself with Google Maps Embed API; and sign up for API key:

The iframe embed option, unlike the Javascript API, does not have usage limits but does not have as many options/features. Determine which MODE you require and observe the required url format and parameters.

Address fields Step two: Collect address from user. For the sake of this discussion I will show an example where the user adds the address into custom metabox fields on a post and will assume the field data has been validated/sanitized.

Display example Step three: Create a function to construct the iframe. Here is an example..I'm sure this could be cleaner. The example function can be called with the post $id of the post containing the address fields or from within the loop without the argument.

function build_map($id = NULL) {

   /* Custom metabox field ids 
   /* Steet Address 'location_address'
   /* City 'location_city'
   /* State 'location_state'
   /* Postcode 'location_postcode'
   */

  if( empty($id) ){
    $id = get_the_ID();
  }

  $address = array(
        /*urlencode to replace spaces with +, etc.,. */
        'address' => urlencode(get_post_meta($id, 'location_address', TRUE)),
        'city' => urlencode(get_post_meta($id, 'location_city', TRUE)), 
        'state' => urlencode(get_post_meta($id, 'location_state', TRUE)),
        'zip' => urlencode(get_post_meta($id, 'location_postcode', TRUE)),
    );

   /* Make sure we have each required field to build iframe*/
   if( count( array_filter($address) ) < 4 ){
       return;
   }
   /* contruct your output as you desire, this is my method: */

   $op = '<div class="google-map-embed">';
   $op .= '<iframe width="{DESIRED WIDTH}" height="{DESIRED HEIGHT}" frameborder="0" style="border:0" ';
   /* src attribute formatted for place mode: */
   $op .= 'src="https://www.google.com/maps/embed/v1/place?q=';
   $op .= implode(',', $address);
   $op .= '&key={YOUR API KEY FROM STEP ONE GOES HERE}';
   /* configure optional zoom parameter: */
   $op .= '&zoom=11"></iframe></div>';

   print $op;

  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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