create dynamic google map with iframe api

Question

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.

Answer 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.

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.

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;

  }