I used business directory plugin which add listing section. Add the listing page, I try to add the map inside the listing page. The map seems to appear inside wordpress directory dashboard but it does not appear in the website. I know that this plugin got google map module, but is there any way to put google map without using the google map addon?Here is my code
<p style="text-align: center;"><img class="alignnone size-medium wp-image-291" src="https://harta-net.s3.amazonaws.com/uploads/2018/05/f84590ac-b53e-432d-9137-2241c7075f2d_tb-300x147.jpeg" alt="" width="300" height="147" /></p> <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3164489624587!2d101.61260631430928!3d3.0093049978084196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdb36044fe6151%3A0x9c6f6535d01735ff!2sMasteron+Grand+Pavilion!5e0!3m2!1sen!2sin!4v1526629036980" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe> directory dashboard image. Here is the link of my website
edit: Add the code and the website link
edit 2: try to use other google map plugin to add but still fail
3 Answers
Answers 1
you can try to add this on any page,post or sections of content/text box
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3164489624587!2d101.61260631430928!3d3.0093049978084196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdb36044fe6151%3A0x9c6f6535d01735ff!2sMasteron+Grand+Pavilion!5e0!3m2!1sen!2sin!4v1526629036980" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> Answers 2
Try using Shortcode.
Here's a working code you can add to the theme's functions.php file:
add_shortcode( 'gmaps_iframe', 'gmaps_iframe_shortcode' ); function gmaps_iframe_shortcode( $atts ) { $atts = shortcode_atts( [ 'src' => '', 'width' => '600', 'height' => '450', ], $atts ); return $atts['src'] ? sprintf( '<iframe style="border: 0;" src="%s" width="%s" ' . 'height="%s" frameborder="0" allowfullscreen="allowfullscreen"></iframe>', esc_url( $atts['src'] ), esc_attr( $atts['width'] ), esc_attr( $atts['height'] ) ) : ''; } And you'd use it like this:
<p style="text-align: center;"><img class="alignnone size-medium wp-image-291" src="https://harta-net.s3.amazonaws.com/uploads/2018/05/f84590ac-b53e-432d-9137-2241c7075f2d_tb-300x147.jpeg" alt="" width="300" height="147" /></p> [gmaps_iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3164489624587!2d101.61260631430928!3d3.0093049978084196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdb36044fe6151%3A0x9c6f6535d01735ff!2sMasteron+Grand+Pavilion!5e0!3m2!1sen!2sin!4v1526629036980"] Other content here, if any. You can also use https://wordpress.org/plugins/iframe/ if you don't want to or not familiar of editing the functions.php file. With that plugin, you'd have full control over the iframe attributes; and here's how you'd add the Google Maps iframe to the post/page content:
<p style="text-align: center;"><img class="alignnone size-medium wp-image-291" src="https://harta-net.s3.amazonaws.com/uploads/2018/05/f84590ac-b53e-432d-9137-2241c7075f2d_tb-300x147.jpeg" alt="" width="300" height="147" /></p> [iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.3164489624587!2d101.61260631430928!3d3.0093049978084196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cdb36044fe6151%3A0x9c6f6535d01735ff!2sMasteron+Grand+Pavilion!5e0!3m2!1sen!2sin!4v1526629036980" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"] Other content here, if any. You can also try https://wordpress.org/plugins/shortcoder/, which allows you to create content-specific Shortcodes.
Answers 3
Hi Did you added the api key for google maps for specific live url? if not then you have to create and after that you have to mention in your iframe
0 comments:
Post a Comment