Looking For A Fast, Responsive, SEO Optimized & Self Customizable FREE WordPress Theme?

How
Pricing
My Account

How To Implement Google Map In WordPress Plugin

Last Updated on July 7, 2020
by Neeraj Agarwal

Google map is one of the best tools to find the GEO location of any address. You can easily integrate the Google map on your website to provide the exact location of your business area.

Therefore, I come up with a tutorial which makes you understand how to implement Google map in WordPress plugin.

So that you can show the map to any page or post on your WordPress site by adding the shortcode.

[dlv dl_url=”https://www.inkthemes.com/wp-content/uploads/2014/05/Google_map.zip” dl_text =”Download Google Map WordPress Plugin”]

Note: I have created a Google_map folder under the plugin folder of my WordPress, which includes index.php, script.js, style.css files.

PHP File – index.php

I have created a PHP file named index.php which includes-

  • Required plugin details.
  • add_action() – This action is used to add menu item to the WordPress dashboard.
  • ink_menu_page() – to add a top level menu page and register a hook to callback ink_gm_setting() function for outputting the page content.
  • Assign the user entered values into variables and update it under the option table of WordPress database using update_option function.
  • my_script() – to enqueue a css style and javascript file.
  • show_google_map () – this function is getting value for a named option (here is googleMap_latitude_position) from the options database table.
  • Include Google map javascript API.
  • Create a hidden div to show the google map.
  • add_shortcode() – pass the name of the shortcode i.e. googlemap and a call to a function show_google_map() as parameters.

Note: To know more about the add_shortcode() and how you can create shortcode in WordPress plugin, just follow the below link-

Learn How To Create Shortcodes in WordPress Plugin With Examples

[php]

<?php
/* Plugin Name: Google Map
Plugin URI: https://www.inkthemes.com/
Description: Integrate Google Maps on any page or post in a simple way.
Version: 1.0
Author: Jaya Rai
Author URI: https://www.inkthemes.com/
*/
?>
<?php
add_action(‘admin_menu’, ‘ink_menu_page’);

function ink_menu_page() {
add_menu_page(‘GM’, ‘Google Map’, ‘manage_options’, ‘gm_setting’, ‘ink_gm_setting’, ”, 120);
}

function ink_gm_setting(){ ?>
<h2> Google Map </h2>
<form action=”” method=”post”>
<div class=”ink_set”>
<label>Latitude : </label>
<input type=”text” name=”latitude” class=”gm_lat” value=””>
</div>
<div class=”ink_set”>
<label>Longitude : </label>
<input type=”text” name=”longitude” class=”gm_log” value=””>
</div>
<div class=”ink_set”>
<label>Zoom : </label>
<input type=”text” name=”zoom” class=”gm_zoom” value=””>
</div>
<input type=”submit” name=”submit” class=”submit_button”>
</form>

<?php }
if(isset($_POST[‘submit’])){
$latitude = $_POST[‘latitude’];
$logitude = $_POST[‘longitude’];
$zoom = $_POST[‘zoom’];
$map_type = $_POST[‘map_type’];
update_option(‘googleMap_latitude_position’, $latitude );
update_option(‘googleMap_longitude_position’, $logitude );
update_option(‘map_zoom_value’, $zoom);
}

add_action( ‘init’, ‘my_script’ );

function my_script() {
wp_enqueue_script(‘my_script’, plugins_url(‘js/script.js’, __FILE__), array(‘jquery’));
wp_enqueue_style(‘my_style’, plugins_url(‘css/style.css’, __FILE__));

}
function show_google_map() {
global $wpdb;
$GoogleMap_Latitude = get_option(‘googleMap_latitude_position’);
$GoogleMap_Longitude = get_option(‘googleMap_longitude_position’);
$GoogleMap_zoom = get_option(‘map_zoom_value’);

?>
<script
src=”http://maps.googleapis.com/maps/api/js?&sensor=false”>
</script>
<div class=”latitude”> <?php echo $GoogleMap_Latitude; ?> </div>
<div class=”longitude” > <?php echo $GoogleMap_Longitude; ?></div>
<div class=”zoom”> <?php echo $GoogleMap_zoom; ?></div>
<div id=”showmap”> </div>
<?php
}
add_shortcode(‘googlemap’, ‘show_google_map’);
?>

[/php]

JavaScript File – script.js

I have create a javascript file named script.js which includes-

  • jQuery(document). ready() – Execute the code under .ready() when the Document Object Model (DOM) is fully loaded.

Under initialize() function –

  • Assign values of latitude and longitude to a variable myCenter
  • Specify map type under the map properties object mapProp

Note: Basic Map Types

There are 4 types of map are supported in Google Maps API. So you can pick any of the listed options and set it in the below statement-mapTypeId: google.maps.MapTypeId.ROADMAP

  1. ROADMAP
  2. SATELLITE
  3. TERRAIN
  4. HYBRID
  • Create a JavaScript object named map and pass the div element and map properties in it.
  • Add a marker to the map directly by using the marker’s setMap ()
  • .addDomListener(window, ‘load’, initialize) – Execute the initialize() function on window load.
[code lang=”js”]

jQuery(document).ready(function() {
var lat = jQuery(‘.latitude’).text();
var lng = jQuery(‘.longitude’).text();
var zoom = parseInt(jQuery(‘.zoom’).text());

function initialize()
{
var myCenter = new google.maps.LatLng(lat, lng);
var mapProp = {
center: myCenter,
zoom: zoom,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“showmap”),mapProp);
marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
});

[/code]

CSS File – style.css

You can set the appearance of map by setting width, height, border, etc. Also you can set the map fields and submit button position in this file.

[css]

.ink_set{
margin-top: 10px;
}
.latitude, .longitude, .zoom {
display:none;
}
#showmap{
width:500px;
height:380px;
border: 2px solid rgb(207, 203, 203);
margin-top:10px;
}
.submit_button{
margin-top:20px;
}
.gm_lat{
margin-left: 20px;
}
.gm_log{
margin-left: 10px;
}
.gm_zoom{
margin-left: 35px;
}

&nbsp;

[/css]

Screenshots

Once the plugin is activated, it is listed under the sidebar section of the WordPress dashboard.

ready google map plugin

You need to enter the value of latitude and longitude of the location in the respective fields, also set the zoom value and then submit it finally.

Remember, you need to include a negative sign for south and west coordinates.

activate google map plugin and use

Create a new page named, Google Map, insert a shortcode in the content section and then finally go for publish.

google map shortcode

This is how the Google Map appears on the page.

google map shown on page

Conclusion

I hope this tutorial helps you to learn WordPress Google map plugin. If you find any difficulty to implement the above steps then do share it in the comment section. I will definitely help you out. Also share your thoughts about the post.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

InkThemes Logo

Customize Your Website With Beautiful Premium WordPress Themes, Templates & Plugins.

One Click Installation With Advanced Functionality & Awesome Support.

For any query contact us at:
  • [email protected]
Products
  • WordPress Themes
  • Email Marketing
  • Subscription Billing
  • Form Builder
  • Email Verification
Terms of Usage
  • Terms and Conditions
  • Privacy Policy
  • InkThemes Branding
  • Affiliate
  • Contact Us
Join Us
  • Follow us on Twitter
  • Be a fan on Facebook
Analytics
heap-logo1
Help and Support
  • Support
  • Documentation
About
  • Who we are?
  • Careers
Links
  • Blog Categories
  • Marketplace Categories

© 2023 InkThemes LLC. All rights reserved.