Install/Setup/Instructions Plugin Tutorial page

You’ll love the way this simple plugin makes working with Google maps simple and quick.

It enables you to map single points on posts like in this example, or display a map of all your posts (filtered by category if you need) in a page (example).

Please follow these simple steps to get started in less than you might expect!

1. Download this free WordPress plugin from the WP official plugin directory
(link will open in a new window so you won’t get lost).

Install and activate the plugin on your blog.

2. Get a free Google Maps API key for your website, directly from Google

3. Configure the only compulsory plugin setting: paste the Google Maps API key as shown below and confirm. OPTIONALLY, Customize maps size…. and style if you know some CSS. 


You’re pretty much done. And now get ready for action.

1. Map your posts!

Now for every post that needs a Google map,

just fill the address field as shown below:

Please take care of writing the address in the correct way.

FORMAT: Address AddressNumber, City

Voila: in your post, the map will be shown, like on this sample post

Simple options are   provided in the single options panel of the plugin. You can place the map before or after the content.

This plugin is kept simple yet powerful and VERY EASY TO HACK.

Have fun…but there’s more!

2. The Global Map:  How to display a map of all your posts and filter by category if needed

Learn how in the second part of the tutorial.

Go on and read here how to embed the Global map, a Google map showing together all your mapped posts   (all posts which have an address).

41 thoughts on “Install/Setup/Instructions Plugin Tutorial page”

  1. Great program, but when I input my addresses as you specify, it doesn’t display map, although the GEOCODING seems to be created within the post! Tried it with your “example” address (Via del Corso, Roma) and it works fine. Could you show an example using a US style address. Thanks.

  2. Great Tool!!!
    But, is it possible to add maps to pages? I only can add maps to articles right now… can you add this functionality?

    1. I will consider it for sure. Thanks for contributing. Check out the global map feature as it’s the real beauty of the plugin. That map can be embedded in pages only .

  3. I installed the plugin, but don’t see a link to the admin page so I can add my Map API Key. Should the link show automatically?

  4. I successfully installed the plugin with the API, but I get this error message when I try to update a post with address information. Any advice?

    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /home/manfred/public_html/ on line 352

    Warning: file_get_contents(,+Roma&output=xml&key=ABQIAAAAoteElwp2dtl-xuiylc9HzRSg3PNl6gCGyh82mMOpkA2_JzZgzRRWmeXOn84avSQdv2F0Xc-J5X5DDw) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /home/manfred/public_html/ on line 352

    Fatal error: Uncaught exception ‘Exception’ with message ‘String could not be parsed as XML’ in /home/manfred/public_html/ Stack trace: #0 /home/manfred/public_html/ SimpleXMLElement->__construct(”) #1 /home/manfred/public_html/ romeluv_maps_handle_savepost(1481) #2 /home/manfred/public_html/ do_action() #3 /home/manfred/public_html/ wp_insert_post() #4 /home/manfred/public_html/ _wp_put_post_revision(‘romeluv_maps_ha…’, Array) #5 /home/manfred/public_html/ wp_save_post_revision(‘save_post’, 1481, Object(stdClass)) #6 /home/manfred/public_html/ in /home/manfred/public_html/ on line 353

  5. I have opensource web directory, can I integrate this plugins into web services?
    I should provide simple map for my contributor, so they can give direction using googlemap to other user. For example they can add they business including map into my web directory.

    Thanks for your support

  6. I wanted to use the globalmap function and getr this: Fatal error: Call to undefined function get_post_thumbnail_id()
    How can i get it working?

  7. Thank you. As I review for 1 day, This is a good plug-in

    It will be perfect if you provide following features
    1- Ability to input the Lat, Lng coordinate in the address field (I tried put lat,lng but it doesn’t recognized)

    2- Ability to define more than one common icon. For example, I need to have icons for church, icon for bridge, icon for train station, etc. 12 icons.

    In every post, instead of only “Address”, you may add 2 more fields “Lat, Long:” and “Type: “. And you may have in set up page, the “Type Description” and icon’s location of each type.

    With these 2 features, I call this plugin as perfect!.

  8. for example, to allow user input direct Latitude and Longitude,

    echo ”;
    _e(“Address”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’address’,true).'” size=”35″ /> example: Viale Kant 2, Roma ‘;

    echo ”;
    _e(“LatLng”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’latlng’,true).'” size=”35″ /> example: 10.100000, 103.000001 ‘;



    if (strlen($latlngdata)<8) {
    if (strlen($addressdata)<8) {

    list($latitude,$longitude) = explode(",",$latlngdata);

    Do you think it is possible?
    and similar thing for the type.

  9. For the various icons type
    Add this in function romeluv_maps_inner_custom_box() {
    echo ”;
    _e(“Type”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’type’,true).'” size=”35″ /> example: Bridge’;
    and add these in function romeluv_maps_save_postdata( $post_id ) {
    update_post_meta($_POST[‘post_ID’], ‘type’, $typedata);
    And change the concept of the variable “global_romeluv_markers_url” from the FILE to the FOLDER and use type name as the icon name for example if the post’s type is “church” then looks for church.png like this code

    if ( !$image_url or get_option(‘global_romeluv_markers’)==0 ) {$image_url[0]=get_option(‘global_romeluv_markers_url’).get_post_meta($post->ID, ‘type’,true).’.png’; $std_thumb=TRUE;}

  10. I also change this function
    function romeluv_maps_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), ‘romeluv_maps_noncename’ );

    // The actual fields for data entry
    echo ”;
    _e(“Address”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’address’,true).'” size=”35″ /> example: Viale Kant 2, Roma ‘;

    echo ”;
    _e(“LatLng”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’latlng’,true).'” size=”35″ /> example: 10.100000, 103.000001 ‘;

    echo ”;
    _e(“Type”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’type’,true).'” size=”35″ /> example: Bridge’;

    check it out here

    If possible, I would like to get the real change from plug-in owner. Please could you change in correct way (my coding is not good).

    Thank you..

  11. Wonderful plugin, really inventive and well put together. I’d like to use it on my site, but as I’ve restricted access to the backend and am using WP User Frontend plugin with a simple post-submit call, is there anyway in which I can create an input field that users can submit their location without using a TDO Mini Forms hack?

    Anyway, awesome job and keep up the good work!

  12. Well done! This is an excellent piece of work.

    When I display the globalmap there are grey lines between each map square. Also the Zoom bar does not display correctly.

    One the post page the zoom is a plus (+) and minus (-). These work fine. However there is a small gray artifact above it.

    Cheers mate!

  13. Hey! I’m developing a site for a local photography event and so far the RomeLuv seems to be the ideal lightweight plugin for integrating maps. Before giving it a test run I have one important question tho: can we also add the address in form of geo-coordinates? I’m asking because the Google Maps is a bit faulty over here and providing the location via address might give back wrong results.

  14. <?php
    Plugin Name: RomeLuv Google Maps for WordPress
    Plugin URI:
    Description: Supercharge your posts with Google Maps! Places a Google Map inside every post you want just filling the Address field while editing a post. Generates a Global Map with all the posts, in a standard WordPress Page via a simple shortcode: [GLOBALMAP] . Easy to hack for your custom Google Maps implementation
    Version: 1.3.3
    Author: RomeLuv
    Author URI:
    License: GPL v2

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; version 2 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    GNU General Public License for more details.


    if (strlen (get_option ('global_romeluv_markers_url')) <8) update_option('global_romeluv_markers_url',';);
    if ( (get_option ('global_romeluv_markerwidth')) <1) update_option('global_romeluv_markerwidth','30');
    if ( (get_option ('global_romeluv_markerheight')) <1) update_option('global_romeluv_markerheight','30');
    if ( (get_option ('global_romeluv_center_latitute')) <1) update_option('global_romeluv_center_latitute','12.985991');
    if ( (get_option ('global_romeluv_center_longitute')) <1) update_option('global_romeluv_center_longitute','101.103745');

    /* Define the custom box */

    // WP 3.0+
    // add_action( 'add_meta_boxes', 'romeluv_maps_add_custom_box' );

    // backwards compatible
    add_action( 'admin_init', 'romeluv_maps_add_custom_box', 1 );

    /* Do something with the data entered */
    add_action( 'save_post', 'romeluv_maps_save_postdata' );

    /* Adds a box to the main column on the Post and Page edit screens */
    function romeluv_maps_add_custom_box() {
    __( 'Maps', 'romeluv_maps_textdomain' ),


    /* Prints the box content */
    function romeluv_maps_inner_custom_box() {
    global $post;
    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'romeluv_maps_noncename' );

    // The actual fields for data entry
    echo '’;
    _e(“Address”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’address’,true).'” size=”35″ /> example: Viale Kant 2, Roma ‘;

    echo ”;
    _e(“LatLng”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’latlng’,true).'” size=”35″ /> example: 10.100000, 103.000001 ‘;

    echo ”;
    _e(“Type”, ‘romeluv_maps_textdomain’ );
    echo ‘ ‘;
    echo ‘ID,’type’,true).'” size=”35″ /> example: Bridge’;


    /* When the post is saved, saves our custom data */
    function romeluv_maps_save_postdata( $post_id ) {
    // verify if this is an auto save routine.
    // If it is our form has not been submitted, so we dont want to do anything
    if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE )

    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times

    if ( !wp_verify_nonce( $_POST[‘romeluv_maps_noncename’], plugin_basename( __FILE__ ) ) )

    // Check permissions
    if ( ‘page’ == $_POST[‘post_type’] )
    if ( !current_user_can( ‘edit_page’, $post_id ) )
    if ( !current_user_can( ‘edit_post’, $post_id ) )

    // OK, we’re authenticated: we need to find and save the data


    update_post_meta($_POST[‘post_ID’], ‘address’, $addressdata);
    update_post_meta($_POST[‘post_ID’], ‘latlng’, $latlngdata);
    update_post_meta($_POST[‘post_ID’], ‘type’, $typedata);
    // Do something with $mydata
    // probably using add_post_meta(), update_post_meta(), or
    // a custom table (see Further Reading section below)

    return $mydata;

    if (get_option(‘single_romeluv_mapposition’) !=2) add_filter(‘the_content’, ‘romeluv_single_map’); ///adds a map in single posts right before the content

    add_action(‘admin_menu’, ‘rl_google_maps_api_menu’);

    function rl_google_maps_api_menu() {
    add_options_page(‘Google Maps API Key’, ‘RomeLuv Google Maps API Key & Map settings’, ‘manage_options’, ‘romeluv-maps-identifier’, ‘gma_romeluv_plugin_options’);

    function gma_romeluv_plugin_options() {

    RomeLuv Google Maps
    if (array_key_exists('maps_key',$_POST)) {



    if (strlen (get_option ('global_romeluv_markers_url')) <8) update_option('global_romeluv_markers_url',';);
    if ( (get_option ('global_romeluv_markerwidth')) <1) update_option('global_romeluv_markerwidth','30');
    if ( (get_option ('global_romeluv_markerheight'))
    <form method="post" action="”>

    #rlmoptions {}
    #rlmoptions tr {height:35px}

    #rlmoptions td {text-align:left}
    #rlmoptions th {text-align:left;width:250px;}

    Consider viewing a quick introduction video for getting started.
    Only the first setting is vital for getting started: if you need one, Get a free Google Maps API Key from Google!

    Google Maps API Key
    <input type="text" size="40" name="maps_key" value="” /> Mandatory.

    Single posts: map position

    <option value="” >
    Automatically place map BEFORE the content
    Automatically place map AFTER the content
    Manual map placement via PHP code

    (a PHP tag is available too)

    Single posts: map width
    <input type="text" size="3" name="single_romeluv_mapwidth" value="” /> px (leave empty for 100%)

    Single posts: map height
    <input type="text" size="3" name="single_romeluv_mapheight" value="” /> px (if empty, defaults to 320px)

    Single posts: additional CSS styling
    <input type="text" size="40" name="single_romeluv_mapstyle" value="” /> (example: float:right)

    Global Map: map width
    <input type="text" size="3" name="global_romeluv_mapwidth" value="” /> px (leave empty for 100%)

    Global Map: map height
    <input type="text" size="3" name="global_romeluv_mapheight" value="” /> px (if empty, defaults to 320px)

    Global Map: additional CSS styling
    <input type="text" size="40" name="global_romeluv_mapstyle" value="” /> (example: float:right)

    Global Map Markers:

    <option value="” >
    Your custom image URL
    Use post thumbnail if available

    Your image URL for the map markers
    <input type="text" size="40" name="global_romeluv_markers_url" value="” /> (example:

    Global Map: Marker width
    <input type="text" size="3" name="global_romeluv_markerwidth" value="” /> px

    Global Map: Marker height
    <input type="text" size="3" name="global_romeluv_markerheight" value="” /> px

    Global Map Center: Latitute
    <input type="text" size="9" name="global_romeluv_center_latitute" value="” />

    Global Map Center: Longitute
    <input type="text" size="10" name="global_romeluv_center_longitute" value="” />

    <input type="submit" value="” />


    function romeluv_maps_handle_savepost() {
    global $post_ID;
    //geocode with service the address

    if (strlen($latlngdata)<8) {
    if (strlen($addressdata)Response->Placemark->Point->coordinates);
    list($latitude,$longitude) = explode(“,”,$latlngdata);
    update_post_meta($post_ID, ‘longitude’, $longitude);
    update_post_meta($post_ID, ‘latitude’, $latitude);

    add_action(‘save_post’, ‘romeluv_maps_handle_savepost’);

    function romeluv_single_map($post_content_html)
    global $romeluv_single_map_done;
    if ($romeluv_single_map_done) return $post_content_html; else $romeluv_single_map_done=TRUE;
    if (!is_single()) return $post_content_html;
    //return “”.$post_content_html;
    global $wpdb,$post,$mapheight;
    if ($mapwidth<40) $mapwidth="100%"; else $mapwidth.='px';
    if ($mapheightID,’address’,true);
    $latitude=get_post_meta($post->ID, ‘latitude’);
    $longitude=get_post_meta($post->ID, ‘longitude’);
    $latitude=$latitude[0]; $longitude=$longitude[0];

    if ($latitude!=0 OR $longitude!=0) {
    //initialize the map

    var map = new google.maps.Map(document.getElementById(“single-post-map”), {
    scrollwheel: false,
    zoom: 16,
    center: new google.maps.LatLng(‘.$latitude.’, ‘.$longitude.’),
    mapTypeId: google.maps.MapTypeId.SATELLITE

    var marker;
    //add marker to the map and the popup
    $out.= ‘
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(‘.$latitude.’, ‘.$longitude.’),
    map: map,
    animation: google.maps.Animation.DROP

    //close the map
    $out.=’ ‘;

    } //end if


    /// $out now represents the HTML / JS code of the Google map
    if (get_option(‘single_romeluv_mapposition’) ==1) return $post_content_html.$out; //places the single map BEFORE the content. INVERT that for having the map after the content if you need so
    if (get_option(‘single_romeluv_mapposition’) ==2) return $out; //places the single map only when called by the php code:
    /// posts wposts
    WHERE wposts.post_status = ‘publish’
    AND wposts.post_type = ‘post’ “. $whereadditional .”
    ORDER BY wposts.post_date DESC
    //echo $querystr; //useful for debugging your custom query
    $result_posts = $wpdb->get_results($querystr, OBJECT);

    if ($result_posts):

    if (isset($_GET[cat])) echo ”.get_cat_name($_GET[cat]).”;

    if ($mapwidth<40) $mapwidth="100%"; else $mapwidth.='px';
    if ($mapheight<40) $mapheight="320px"; else $mapheight.='px';


    // this variable will collect the html which will eventually be placed in the side_bar
    var gmarkers = [];
    var gicons = [];
    var map = null;
    var html = [];

    // start map
    var map = new google.maps.Map(document.getElementById(“romeluv-global-map”), {
    scrollwheel: false,
    zoom: 14,
    center: new google.maps.LatLng(‘.$mapcenterlat.’,’.$mapcenterlng.’),
    mapTypeId: google.maps.MapTypeId.ROADMAP

    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    function getMarkerImage(iconType) {
    if (!gicons[iconType]) {
    gicons[iconType] = new google.maps.MarkerImage(“‘.get_option(‘global_romeluv_markers_url’).'”+iconType+”.png”, null, null, null, new google.maps.Size(‘.get_option(‘global_romeluv_markerwidth’).’,’.get_option(‘global_romeluv_markerheight’).’));’.’
    return gicons[iconType];

    // A function to create the marker and set up the event window
    function createMarker(mapLat,mapLng,name,html,mapType) {
    var contentString = html;
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(mapLat,mapLng),
    map: map,
    icon: gicons[mapType]

    // === Store the category and name info as a marker properties ===
    marker.mycategory = mapType;
    marker.myname = name;

    // add listener
    google.maps.event.addListener(marker, “mousedown”, (function(marker, i) {
    return function() {
    })(marker, i));
    //START Checkbox feature
    // == shows all markers of a particular category, and ensures the checkbox is checked ==
    function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;

    // == hides all markers of a particular category, and ensures the checkbox is cleared ==
    function hide(category) {
    for (var i=0; iID)) continue; //this allows category filtering adding the $_GET parameter ?cat=xx
    if (is_category()) { if (!in_category($cat_ID,$post->ID)) continue; } //skip posts if viewing a category page, if those do not match the current category

    $latitude=get_post_meta($post->ID, ‘latitude’);
    $longitude=get_post_meta($post->ID, ‘longitude’);
    $latitude=$latitude[0]; $longitude=$longitude[0];

    if (!$latitude>0 or !$longitude>0) { //no data set: update the post custom fields according to the address
    // $post_ID=$post->ID;
    if ($_GET[geocode_all_posts]==1){
    romeluv_maps_handle_savepost(); // if you want to re-geocode all posts –
    //i.e. you started with an old blog with a custom field name ‘address’ and you want to geocode all that in a snap,
    /// call the url of a map page with the ?geocode_all_posts=1 parameter

    $latitude=get_post_meta($post->ID, ‘latitude’);
    $longitude=get_post_meta($post->ID, ‘longitude’);
    $latitude=$latitude[0]; $longitude=$longitude[0];
    if ($latitude!=0 OR $longitude!=0) {
    $image_url= wp_get_attachment_image_src(get_post_thumbnail_id(), ‘thumbnail’);
    if (!$image_url or get_option(‘global_romeluv_markers’)==0 ) {
    $myMapType = get_post_meta($post->ID, ‘type’,true);
    if ($myMapType == “”) $myMapType = “others”;

    $out.= ‘html= “ID).’\’>‘.get_the_title().’‘;

    ///if thumbnail image is defined in the theme, show it in the map popups.
    if (!$std_thumb) $out.=”ID).”‘>“;
    $out.=”.”Address: “.get_post_meta($post->ID,’address’,true).’ ‘;

    ///list post categories
    foreach((get_the_category()) as $category) {
    $out.= ‘‘.$category->cat_name . ‘ ‘;
    if (!in_array($myMapType,$stackType)) {

    var marker = createMarker(‘.$latitude.’,’.$longitude.’,”‘.get_post_meta($post->ID,’address’,true).'”,html,”‘.$myMapType.'”);




    //Make a check boxes feature
    foreach ($stackType as $itemType) {
    $out.=”.$itemType.’ |
    //End of check boxes feature

    else :

    $out.=’No elements to show on the map.’;

    endif; ?>

  15. Sorry, I try to post the modify version above but seem the wordpress comment cut the coding..
    Pls let me know how can I share my modified version to you….

    Sorry for any inconvenient

  16. Also: the Screencast link returns this:

    This content is currently unavailable. Please contact the content owner for more information.



  17. Can’t find admin page to add API key and get this message when I try to access the screecast install video…

    This content is currently unavailable. Please contact the content owner for more information.

  18. Hello, I was wondering if there is a way to set the icon for each address on the map by post category so say, restaurants would have a different icon than a hotel based on the category for that post.

    Also curious if it’s possible to set the zoom either through the php file or Google API. I tried one location and it was zoomed way too far in.

    Thanks so much! Love this plugin!

  19. Hi..great plugin – exactly why we needed for our client. However, we are having a strange problem.

    If you look at – you will see that when you click on the photos, there is a transparency issue. We looked through the code, and cannot see why this problem exists. Any help would be greatly appreciated.

    Thank you!

  20. In order to run a single Youtube user profile, you should buy Tweet adder for a one-time check connected with $55, without any continuing monthly fees or costs. Also you can test a trial model at no cost prior to you buying that. Whenever you purchase Tweet adder, you will get free of charge life time help and updates

  21. Hi, Could anyone help I get this error when debuging:

    Notice: Undefined index: geocode_all_posts in /websites/webfusiones/LinuxPackage30/wf/t8/xa/ on line 492

  22. I tryed to use it on my website, but after installing it, the theme does’nt show some parts of the website… (theme: dice –
    And the second thing, the api key system from google has changed. How to use the new key from the “API Access page”, your plugin does not accept this code!?

    Any Help?

  23. Yours is the second google map plugin I have installed with the same issue. I chose yours because of the custom CSS fields as I have a BLACK website with white type and inevitably the BUBBLE is white on white and the information cannot be read. I have tried every CSS I can think of and it isn’t changing. The only way is to change my entire website content color to grey, which pretty much destroys the look of the site. Could you provide me with CSS or code to write in your php to fix this issue? I really love the functionality and I am starting to get discouraged. I would so appreciate your help.

  24. This plugin looks fantastic and exactly what I wanted.. isisn’t there an update version of it? Apparently there’s not even more need for the Google API key, I don’t know how to set it…

    Thank you

  25. I just upgraded to WordPress Weaver II Theme and it seems to not support your Google Maps. I spent countless hours adding the addresses to 270 posts and I am hoping you can help! I love this Plugin!

Comments are closed.