Problem Building a Simple Google Maps Plugin

0 Views

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:

Read More
<?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

Post Views: 0

Related posts

Leave a Reply

2 comments

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

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