Problem Building a Simple Google Maps Plugin

Question

I'm learning how to build a google maps plugin. (I know that there are plugins that add Google Maps, but I'd like to be able to adapt the code to my needs. And it's fun to learn).

Unfortunately, I'm not getting a map after inserting my short code. This is the main php file of the plugin:

<?php
/*
Plugin Name: Lax Google Map Plugin
Plugin URI: http://www.mysite.com
Description: Make Map
Version: 1.0
Author URI: http://www.mysite.com
*/


function lax_google_map_init() {
    wp_enqueue_script('google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false');
}
add_action('init', 'lax_google_map_init');


function lax_google_map_init_js() {
  wp_enqueue_script('lax_google_map_script', plugins_url('js/lax_google_map_script.js', __FILE__), array('google-maps'));
    }

 add_action('init', 'lax_google_map_init_js');


function lax_google_map_maker($atts,$content=null) {


   $output = '<div id="map_canvas" style="width:100%; height:100%"></div>';

return $output;

}



add_shortcode('lax-google-map', 'lax_google_map_maker');
?>

In the javascript file, I've got:

jQuery.noConflict();

jQuery(document).ready(function($) {

  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

});

I'm not getting an error. It doesn't do anything. Any suggestion as to what I'm doing wrong? I want to get a basic map working and then I should be able to add more functionality later. Thank you.

-Laxmidi

Why don't you include all your wp_enqueue_script calls in one init function? Hooking 'init' twice creates more overhead for your theme. I would also check the source of your site to see if your scripts are rendering and secondly if the urls output correctly. — Brian Fegter
– Brian Fegter, Commented Sep 15, 2011 at 1:48
Hi @Brian Fegter, Thnak you for your comment. I'll combine the wp_enqueue_script calls as patnz suggested. I see the scripts in the browser view source and when I click on the script src they open. If you have other ideas, that I can try, I'd love to hear them. Thank you. — Laxmidi
– Laxmidi, Commented Sep 15, 2011 at 4:19
If you use Chrome Developer Tools or Firebug, open the console and watch for Javascript errors. If there isn't. I would pull the JS files down locally and create a dummy HTML file to test and get working correctly first, then port it back to Wordpress. — Brian Fegter
– Brian Fegter, Commented Sep 15, 2011 at 4:29

patnz · Accepted Answer · 2011-09-15 10:22:49Z

Wierd, just re-read your comment and looks like your shortcode is working when you call it that early - if the map-canvas div is showing up. here's the code I tested, also added jquery as a dependency for your custom script & changed some css on you div...

function lax_google_map_init() {
    wp_enqueue_script('google-maps', 'http://maps.googleapis.com/maps/api/js?sensor=false');
    wp_enqueue_script('lax_google_map_script', plugins_url('js/lax_google_map_script.js', __FILE__), array('google-maps','jquery'));

    add_shortcode('lax-google-map', 'lax_google_map_maker');
}
add_action('init', 'lax_google_map_init');

function lax_google_map_maker($atts,$content=null) {
    $output .= '<div id="map_canvas" style="width:100%; height:100px; border:1px solid black;"></div>';
    return $output;
}

Looking at that now, it may be a css thing with the height: 100% on your map div not being able to find a defined height on a parent container...

Hi @patnz, Thanks so much for your kind help. It works! I was able to move the add_shortcode line outside of the lax_google_init function. The problem might have been the css as you suggested or the jquery dependency. In any event, I'm stoked. Thank you! — Laxmidi
– Laxmidi, Commented Sep 15, 2011 at 13:57

patnz · Accepted Answer · 2011-09-15 01:16:13Z

0

It all looks fine. Are both the scripts showing up and have correct src references when you view the page's source code? Are you getting any JS errors in firebug or other dev tool?

Not sure if the script you've enqueued as 'google-maps' needs to be registered first (wp_register_script()) to be listed as a dependency for lax_google_map_script. You could try having both those scripts enqueued in the same funtion, since they both run on init hook.

Also, I'm sure you've checked this but does your theme have wp_head() in the header?

answered Sep 15, 2011 at 1:16

patnz

1,4591 gold badge15 silver badges21 bronze badges

Hi @patnz, thank you very much for your message. When I view the source code in the browser, I see the scripts and my map_canvas div. I'm using the Superb theme, which has a google maps shortcode. I thought that there might be a conflict, so I switched to the default theme, but no luck. I checked for JS errors in Firebug. There was one warning, but no errors. In Firebug, I see 200 as the result, except for one 204 for csi.gstatic/csi?v=2... I'm not sure what that is. Both themes have wp_head(). If you have other ideas, I'd love to hear them. Thank you!

Laxmidi
– Laxmidi

2011-09-15 04:16:42 +00:00
Commented Sep 15, 2011 at 4:16
Looks like addshortcode() needs to be called later. I tested with just one init function, loaded both the javascripts in there as well as add_shortcode() and it worked fine.

patnz
– patnz

2011-09-15 10:15:15 +00:00
Commented Sep 15, 2011 at 10:15

Add a comment |

Stack Exchange Network

Problem Building a Simple Google Maps Plugin

2 Answers 2

Your Answer

Hot Network Questions

Problem Building a Simple Google Maps Plugin

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions