Support » Plugin: RomeLuv Google Maps for WordPress » [Plugin: RomeLuv Google Maps for WordPress] Modify for multiple icons

  • I made some change

    advantage: you can use multiple icons in global map, it automatic link to the icons.png. you just define the icon folder.

    disadvantage: i remove the thumbnail picture.

    Installation: Just copy code below…replace to the file romeluv-maps.php after you install

    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 '<label for="romeluv_maps_address_field">';
           _e("Address", 'romeluv_maps_textdomain' );
      echo '</label> ';
      echo '<input type="text" id="romeluv_maps_address_field" name="romeluv_maps_address_field" value="'. get_post_meta($post->ID,'address',true).'" size="35" /> example: Viale Kant 2, Roma <BR>';
      echo '<label for="romeluv_maps_latlng_field">';
           _e("LatLng", 'romeluv_maps_textdomain' );
      echo '</label> ';
      echo '<input type="text" id="romeluv_maps_latlng_field" name="romeluv_maps_latlng_field" value="'. get_post_meta($post->ID,'latlng',true).'" size="35" /> example: 10.100000, 103.000001 <BR>';
      echo '<label for="romeluv_maps_type_field">';
           _e("Type", 'romeluv_maps_textdomain' );
      echo '</label> ';
      echo '<input type="text" id="romeluv_maps_type_field" name="romeluv_maps_type_field" value="'. get_post_meta($post->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() {
    <div style='margin:15px;'>
    <h2>RomeLuv Google Maps</h2>
    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')) <1) update_option('global_romeluv_markerheight','30');
    <form method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    #rlmoptions {}
    #rlmoptions tr {height:35px}
    #rlmoptions td {text-align:left}
    #rlmoptions th {text-align:left;width:250px;}
    <p><small>Consider viewing a quick <a target="new" href=''>introduction video</a> for getting started. </small></p>
    <p><i>Only the first setting is vital for getting started: if you need one,  <a target="new" href="">Get a free Google Maps API Key from Google!</a>
    <table id='rlmoptions'>
    <tr valign="top">
    <th scope="row">Google Maps API Key</th>
    <td > <input type="text" size="40" name="maps_key" value="<?php echo get_option('maps_key'); ?>" /> <b>Mandatory.</b><br /><br /><br /><br />
    <tr valign="top">
    <th scope="row">Single posts: map position</th>
    <select name="single_romeluv_mapposition">
      <option  value="<?php echo get_option('single_romeluv_mapposition'); ?>" >  <?php $map_position= get_option('single_romeluv_mapposition');
      if ($map_position==0) echo "Automatically place map BEFORE the content";
       if ($map_position==1) echo "Automatically place map AFTER the content";
        if ($map_position==2) echo "Manual map placement via PHP tag";
      ?>  </option>
      <option value="0">Automatically place map BEFORE the content</option>
      <option value="1">Automatically place map AFTER the content</option>
      <option value="2">Manual map placement via PHP code</option>
         (a <a href=''>PHP tag</a> is available too)   </td>
    <th scope="row">Single posts: map width</th>
    <td><input type="text" size="3" name="single_romeluv_mapwidth" value="<?php echo get_option('single_romeluv_mapwidth'); ?>" /> px (leave empty for 100%)</td>
    <tr valign="top">
    <th scope="row">Single posts: map height</th>
    <td><input type="text" size="3" name="single_romeluv_mapheight" value="<?php echo get_option('single_romeluv_mapheight'); ?>" /> px (if empty, defaults to 320px)</td>
    <tr valign="top">
    <th scope="row">Single posts: additional CSS styling </th>
    <td><input type="text" size="40" name="single_romeluv_mapstyle" value="<?php echo get_option('single_romeluv_mapstyle'); ?>" /> (example: <b>float:right</b>)</td>
    <tr valign="top">
    <th scope="row">Global Map: map width</th>
    <td><input type="text" size="3" name="global_romeluv_mapwidth" value="<?php echo get_option('global_romeluv_mapwidth'); ?>" /> px (leave empty for 100%)</td>
    <tr valign="top">
    <th scope="row">Global Map: map height</th>
    <td><input type="text" size="3" name="global_romeluv_mapheight" value="<?php echo get_option('global_romeluv_mapheight'); ?>" /> px (if empty, defaults to 320px)</td>
    <tr valign="top">
    <th scope="row">Global Map: additional CSS styling </th>
    <td><input type="text" size="40" name="global_romeluv_mapstyle" value="<?php echo get_option('global_romeluv_mapstyle'); ?>" /> (example: <b>float:right</b>)</td>
    <tr valign="top">
    <th scope="row">Global Map Markers:  </th>
    <select name="global_romeluv_markers">
      <option  value="<?php echo get_option('global_romeluv_markers'); ?>" >  <?php $global_romeluv_markers= get_option('global_romeluv_markers');
      if ($global_romeluv_markers==0) echo "Your custom image URL  ";
       if ($global_romeluv_markers==1) echo "Use post thumbnail if available";
      ?>  </option>
      <option value="0">Your custom image URL</option>
      <option value="1">Use post thumbnail if available</option>
    <tr valign="top">
    <th scope="row">Your  image URL for the map markers </th>
    <td><input type="text" size="40" name="global_romeluv_markers_url" value="<?php   echo get_option('global_romeluv_markers_url');  ?>" /> (example: </td>
    <tr valign="top">
    <th scope="row">Global Map: Marker width</th>
    <td><input type="text" size="3" name="global_romeluv_markerwidth" value="<?php echo get_option('global_romeluv_markerwidth'); ?>" /> px  </td>
    <tr valign="top">
    <th scope="row">Global Map: Marker height</th>
    <td><input type="text" size="3" name="global_romeluv_markerheight" value="<?php echo get_option('global_romeluv_markerheight'); ?>" /> px  </td>
    <tr valign="top">
    <th scope="row">Global Map Center: Latitute</th>
    <td><input type="text" size="9" name="global_romeluv_center_latitute" value="<?php echo get_option('global_romeluv_center_latitute'); ?>" /></td>
    <tr valign="top">
    <th scope="row">Global Map Center: Longitute</th>
    <td><input type="text" size="10" name="global_romeluv_center_longitute" value="<?php echo get_option('global_romeluv_center_longitute'); ?>" /></td>
    <input type="hidden" name="page_options" value="maps_key" />
    <input type="submit" value="<?php _e('Save Changes') ?>" />
    function romeluv_maps_handle_savepost() {
    	global  $post_ID;
    	 //geocode with service the address
    	if (strlen($latlngdata)<8) {
    		if (strlen($addressdata)<8) {
    					update_post_meta($post_ID, 'longitude', 0);
    				  update_post_meta($post_ID, 'latitude', 0);
    				  return ('');
        $addressdata=str_replace(' ','+',$addressdata);
        $address1 ="".$addressdata."&output=xml&key=".get_option('maps_key');
    	  $page = file_get_contents($address1);
    	  $xml = new SimpleXMLElement($page);
    	   list($longitude, $latitude, $altitude) = explode(",",$xml->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 ($mapheight<40) $mapheight="320px"; else $mapheight.='px';
      ///get values from post custom fields
      $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
    		  $out=' <!-- single post map created by RomeLuv Google Maps -->
    			    <script src="'. get_option('maps_key').'" type="text/javascript"></script>
    			     <script src=""
    			   <div id="single-post-map" style="width: '.$mapwidth.'; height:'. $mapheight.';  '.get_option('single_romeluv_mapstyle').'"></div>
    			     <script type="text/javascript">
    			       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.='   </script> ';
          }  //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:
                                                                        /// <?php global $romeluv_single_map_done;$romeluv_single_map_done=FALSE; if (function_exists(romeluv_single_map)) echo romeluv_single_map('');
      return $out.$post_content_html; //places the single map BEFORE the content.
    	} //end function single map
    add_shortcode('GLOBALMAP', 'romeluv_global_map');
    function romeluv_global_map($atts)
        if (is_single()) return('');  // avoid making trouble if looking at a single post. The  GLOBALMAP shorttag is meant to be used in pages only.
        //global $romeluv_global_map_done;
        //  if ($romeluv_global_map_done) return ''; else $romeluv_global_map_done=TRUE; //allow only one map per page
        global $wpdb,$post;
        $stackType = array();
        ////query all the posts to display on the global map
         $querystr = "
           SELECT wposts.*
           FROM $wpdb->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 '<h3 id="map-category-heading">'.get_cat_name($_GET[cat]).'</h3>';
        if ($mapwidth<40) $mapwidth="100%"; else $mapwidth.='px';
        if ($mapheight<40) $mapheight="320px"; else $mapheight.='px';
        $out='<!-- global post map created by RomeLuv Google Maps for WordPress -->
               <script src="'. get_option('maps_key').'" type="text/javascript"></script>
               <script src=""  type="text/javascript"></script>
               <div id="romeluv-global-map" style="width: '.$mapwidth.'; height:'. $mapheight.'; '.get_option('single_romeluv_mapstyle').' "></div>
               <script type="text/javascript">
                  // 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; i<gmarkers.length; i++) {
                       if (gmarkers[i].mycategory == category) {
                  // == clear the checkbox ==
                  document.getElementById(category+"box").checked = false;
                  // == close the info window, in case its open on a marker that we just hid
              // == a checkbox has been clicked ==
              function boxclick(box,category) {
                  if (box.checked) {
                  } else {
                 // == rebuild the side bar
              //END of Checkbox feature
         if(is_category()  ){
           $cat_ID = get_query_var('cat');
         foreach ($result_posts as $post): 
              if (isset($_GET[cat])) if (!in_category($_GET[cat],$post->ID)) 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= "<p style=\'width:95%\'><a class=\'romeluv-google-map-link\' href=\''.get_permalink($post->ID).'\'><b>'.get_the_title().'</b></a><br/>';
                ///if thumbnail image is defined in the theme, show it in the map popups.
                if (!$std_thumb)  $out.="<a href='".get_permalink($post->ID)."'><img  src='".$image_url[0]."' ></a><br />";
                $out.='<br />'."Address: <b>".get_post_meta($post->ID,'address',true).' </b><br /><br />';
                ///list post categories
                foreach((get_the_category()) as $category) {
                                  $out.= '<i>'.$category->cat_name . '</i>  ';
                if (!in_array($myMapType,$stackType)) {
               var marker = createMarker('.$latitude.','.$longitude.',"'.get_post_meta($post->ID,'address',true).'",html,"'.$myMapType.'");
         //Make a check boxes feature
        $out.='<div id="box_form" style="width: 100%"><form action="#">
        foreach ($stackType as $itemType) {
            $out.='<input type="checkbox" checked = "checked" id="'.$itemType.'box" onclick="boxclick(this,\''.$itemType.'\')" />'.$itemType.' |
         //End of check boxes feature
        else : 
        $out.='No elements to show on the map.';
        endif; ?>
        return $out;

Viewing 2 replies - 1 through 2 (of 2 total)
  • You don’t need to use API key anymore, just delete parts asking for it. It will works perfect anyway!

    The plugin works great! But I have few problems

    1. The map appears after the “related posts”.
    Does not get included into the post content.
    Post content -then- Related posts- then- Map = looks ugly.

    2. Can satellite view of the maps be made default??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Plugin: RomeLuv Google Maps for WordPress] Modify for multiple icons’ is closed to new replies.