Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
1  
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 Sep 15 '11 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 Sep 15 '11 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 Sep 15 '11 at 4:29
    
@Brian Fegter, Thank you for your help. –  Laxmidi Sep 15 '11 at 13:58
add comment

2 Answers 2

up vote 4 down vote accepted

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

share|improve this answer
    
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 Sep 15 '11 at 13:57
add comment

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?

share|improve this answer
    
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 Sep 15 '11 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 Sep 15 '11 at 10:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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