WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] google map in admin section (7 posts)

  1. mgargiullo
    Member
    Posted 1 year ago #

    I'm trying to get a google map to display on an admin menu on a plugin I'm writing. When I view the source of the admin page, I can se the javascript for the map, but the map is never generated. Is there a trick to this?

  2. idontknowhowtousewordpress
    Member
    Posted 1 year ago #

    Try using Bing Maps?

  3. mgargiullo
    Member
    Posted 1 year ago #

    No... Not Bing maps.

    So here's the code on the admin page:

    function mrg_test_Add_Page() {
    	if ( !current_user_can( 'manage_options' ) )  {
    		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    	}
    	?>
    
    	<script type="text/javascript">
    	jQuery.noConflict();
    
    	jQuery(document).ready(function($) {
    		mrgtestInitialize();
    	});
    
    	var map;
    	var geocoder;
    	var position;
    
    	function mrgtestInitialize() {
    			//geocoder = new google.maps.Geocoder();
    			var latlng = new google.maps.LatLng(40.7142, 74.0064);
    			var mapOptions = {
    		    	zoom: 8,
    		    	center: latlng,
    		    	mapTypeId: google.maps.MapTypeId.ROADMAP
    		  	};
    			map = new google.maps.Map(document.getElementById("map-canvas-1"), mapOptions);
    	}
    	</script>
    
    	<div id="map-canvas-1"> </div>
    
    	<?php
    }
  4. idontknowhowtousewordpress
    Member
    Posted 1 year ago #

    simple question...don't hate me for this, but is your javascript up to date?

  5. mgargiullo
    Member
    Posted 1 year ago #

    Also have this:

    add_action( 'admin_enqueue_scripts', 'mrg_test_head' );

    and this:

    function mrg_test_head() {
    	?>
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    	<?php
    	wp_register_script('mrg_test_google_js_api', "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false");
    	//wp_register_script('mrg_test_functions', mrg_test_PLUGIN_DIR . '/functions.js');
    	wp_enqueue_script('mrg_test_google_js_api');
    	wp_enqueue_script('mrg_test_functions',plugins_url('/functions.js', __FILE__));
    }

    So the google API is loaded.

  6. mgargiullo
    Member
    Posted 1 year ago #

    "simple question...don't hate me for this, but is your javascript up to date?"

    Honestly, not sure what you mean. The google api javascript is from google's v3 sample code site. If I put it on its own, it loads fine and displays the map. Like above, the map code is loaded into the DIV, but not displayed.

  7. mgargiullo
    Member
    Posted 1 year ago #

    ok... disregard... I forgot that I have to set the height of the div so the map will show.

    Adding this allows it to show.

    <style>
    #map-canvas{
    width: 500px;
    height: 400px;
    }
    </style>

Topic Closed

This topic has been closed to new replies.

About this Topic