You may be building a website that has plugins or modules to deal with google maps, but, you may be working on a site that does not have modules or plugins available. In that event, you can use the following code to create a function that allow you to enter either longitude/latitude or address for mapping.
The following code clip will allow you to display a map with markers and associated pop-up bubble. You can add as many markers as you would like, with an equal number of pop-up information bubbles. You can place the markers by specifying an address, or a longitude and latitude.
<style type="text/css">
.entry-content { max-width:none ; }
#bubble { height: 50px ; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -khtml-border-radius: 10px;
border-radius: 10px; }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function map_initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
d_map = new google.maps.Map(document.getElementById("map-me"),
myOptions);
mapIt(999, 999, "Crescent City, CA",
"http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/marker.png",
"label to see on hover of marker",
"<'div id='bubble'>Say something in the pop-up bubble</div>",
"http://www.mydomain.com/link") ;
}
function mapIt(lat, lng, address, image, label, bubble, alink) {
if (lat != 999) {
var myLatLong = new google.maps.LatLng(lat,lng) ;
d_map.setCenter(myLatLong);
var link = alink ;
var contentString = '<div class="marker_content">'+
'<a href="' + link + '">' + bubble +
'</a></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
map: d_map,
icon: image,
title: label,
position: myLatLong
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(d_map,marker);
});
} else {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
d_map.setCenter(results[0].geometry.location);
var link = alink ;
var contentString = '<div class="marker_content">' +
'<a href="' + link + '">' + bubble + '</a></div><p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
map: d_map,
icon: image,
title: label,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(d_map,marker);
});
} else { alert("Geocode was not successful
for the following reason: " + status); }
});
}
}
jQuery(function() {
map_initialize() ;
}) ;
</script>
Sample
If you see this, JavaScript not supported.
I should mention several things about the above code:
In the declaration of the div for map-me, you can change the width and height of the map.
In the declaration of var myLatLng in map_initialize(), you can change the longitude and latitude that will be used for the center of the map
In the declaration of myOptions in map_initialize(), you can change the type of map, and zoom to meet your needs
You may make multiple calls to mapIt() to insert markers on the map.
If you do not use the latitude and longitude in mapIt, use values 999,999.
In mapIt, you include the flag for the marker, so, you can make every marker can look different.
In mapIt, you can pass the content used in the bubble for the marker … it can include HTML.
If you need to create a short code for WordPress, you shouldn’t be reluctant. The following short code handling could be created as a plugin, but, this handling will be installed as if it were intended to be part of a theme. As a result, instead of being added as a plugin, it should be inserted in the functions.php in the theme directory. Remember, a functions.php file in the themes directory will be available just as if you had added it to the functions.php file in WordPress, but, your changes will not be lost with an upgrade of WordPress.
Creating a WordPress short code is easy. The following is an example of creating short code.
This short code creates a button for WP e-commerce to allow the visitor to click the button to order a product and immediately be dropped at the checkout page. This cuts a step out of the ordering process of a simple item in WP e-commerce.
/**
* Custom shortcode function added to create a button that adds
* a product to cart and takes customer directly to checkout page.
*
* Usage:
* [add_and_go_to_checkout class='my_button_class'
* id=1 name='buy_my_product' value='Buy My Product'
* image='image.jpg']
*
*/
function wpsc_add_and_go_to_checkout_shortcode($atts) {
// build form for button
$shopping_cart_url = get_option('shpping_cart_url') ;
$output = <<<GOTOCHECKOUTSELECTION
<form class='go_direct' action='{$shopping_cart_url}'
method='post'>
<input type='hidden' name='wpsc_ajax_action'
value='add_to_cart'>
<input type='hidden' name='product_id'
value='{$atts["id"]}'>
<button type='submit' id='product__submit_button'
class='{$atts["class"]}' name='{$atts["name"]}'
value='{$atts["value"]}'>
<img src='{$atts["image"]}' alt='submit'></button>\\n">
</form>
GOTOCHECKOUTSELECTION;
return $output ;
}
add_shortcode( $tag = 'add_and_go_to_checkout',
$func = 'wpsc_add_and_go_to_checkout_shortcode') ;
Therefore, by using “add_shortcode,” creating a simple function, and add the function and add_shortcode command to the functions.php file in your theme directory, you can create a helper short code that meets the needs of your WordPress site.
Gradients may be used in backgrounds via CSS. This is not available by CSS in all browsers, but, the feature is coming along. Even browsers that support gradients may have some holes in their functionality. This feature is defined in CSS3, use it and include fallback handling. Though the CSS3 version is not supported by all new browsers, it will be available soon. It has been available for webkit, opera, mos, and ms for some time, at least to some level. The following explains how the gradient can be used reasonably reliable across browsers. While the oldest Safari and Chrome syntax is shown in the cross browser samples, they are very different format from the current CSS3 syntax. That will be used, but, not discussed here. Meanwhile the new Mozilla, and the more recent webkit, mos and ms are very similar in format to the CSS3 syntax, and will be discussed below.
angleOrlocation – This indicates the location/direction that the gradient will go. The value may be:
Defined in degrees, such as 30degree, or 190deg
Listed as {top, bottom, left, right, top left, top right, bottom left, bottom right, circle}, indicating where the gradient starts. Top would result in vertical gradient from top to bottom. Left would result in horizontal running left to right
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band.
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.
Note: In the previous discussion, I refer to the positioning of the color by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …
[% %] – this is the location of the center of the shape, such as 80% 20%. If this field is not present, the shape is centered in the DIV.
type – identify if the shape will be {circle, ellipse }. If this field is not present, ellipse is used
size – the size is specified relative to { closest-side, farthest-side, closest-corner, farthest-corner, contain, cover }
stop1 x% – the color to start gradient and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop2 x% – the color to blend to from stop1 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop3 x% – the color to blend to from stop2 and an optional percent, identifying where the stop is located, effecting the width of the transition band
stop x% …. as many color and optional percent, identifying where the stop is located, effecting the width of the transition band
stopN – the color to blend to from the previous stop.
Note: In the previous discussion, I refer to the positioning of the color and center by %. Actually, the value can be given in % or other measuring method, such as; px, rem, em, …
Using CSS to create a Horizontal Gradient Background on a DIV
Using CSS to Create a Vertical Gradient on a DIV
Using CSS to Include Multiple Band Gradients on a DIV
Using CSS to Create an Even Stop Gradient on a DIV
If you would like an even stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Using CSS to Create an arbitrary Stop Gradient on a DIV
If you would like an arbitrary stop gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Notice the use of 5% and 95% to affect the location at which the color band is to start, and therefore affects the width of the transition bands.
Using CSS to Create a Diagonal Gradient on a DIV
If you would like a diagonal gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Notice: To go from top left to bottom right, the standard requires the specification of the end location, bottom right. Safari (webkit) reverses the logic of the location to specify in the first parameter. Webkit expects the use of the begin point of the diagonal. If you want to go from top left to bottom right, specify top left.
Using CSS to Create an Angled Gradient on a DIV
If you would like a gradient at a specific angle on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Using CSS to Create a Radial Gradient on a DIV
Notice: for circular gradients, the first parameter is replace with the value circle. You may use the percent on the color bands to position from the center of the circle.
Using CSS to Create a Positioned Radial Gradient on a DIV
If you would like a positioned radial gradient on selected DIV, there is a CSS3 option to handle this situation.
This is available in CSS3, and special case options for old -webkit, and -mos browsers.
Recently, I had a client that preferred not to use the POP server on her site. She had an alternate email address and wanted all her site email forwarded to her alternate email address. This caused a problem.
The clients host server offered no method (via a control panel) to request old email be deleted as a result of age, or be deleted automatically. As mail was forwarded, copies remained on the clients server and built up and up. What was needed was to have a method for automatically delete old email, even if the client did not visit her via POP or IMAP.
The solution was relatively simple, create a cron job to delete the aged mail. The reason this was simple, the server stored each email in a separate file in a specific sub-directory off the server root. After talking with the client, it was agreed that we would automatically delete mail over 90 days old, just in case the client decided it was worth her effort to visit the site for some recent mail on some unusual occasion.
Once the aging was determined the only problem was to find the complete path to the mail directory to be kept clean. Then, assuming is the path to the mail directory to be cleaned, it was determined that a cron task could list mail that was 90 old once a week using the following cron command:
0 0 * * 0 `find -atime +90`
Then, this could be used to remove old mail once a week by using the following cron command:
0 0 * * 0 rm `find -atime +90`
Voila, a cron task that will keep the email for 90 days. Use the concept where you like take care of files that may age.
Well, I have been unable to post for 5 days. My computer has been in disarray thanks to one of those wonderful people out in the blue skies of the internet that love to send out viruses.
Some lovely person sent out a lovely virus or Trojan that infiltrated my computer and damaged the operating system, not just create a minor nuisance. I spent two days attempting to rid the computer of the virus. The first day, I attempted to clean the drive while running off the machine, hoping it was only a superficial problem. The second day, I removed the hard drive from my computer, hooked it up as an external drive to another computer and attempted to clean it that way. The second day, I ran chkdsk on the external drive and it showed error. Further research showed that a file within the Windows directory had been damaged.
The effects of the damage were fascinating, in a sick way. The computer degenerated over a couple of days, before I was certain there was a problem. The first day, the computer virus detection did not find a problem, though it was clear there was a problem. Dr Web, AVG, Microsoft Security Essentials, and MalwareBytes all failed to see the problem, though the computer was having problems slowing down and locking up. The second day, All virus detection could find a problem, but, none could scan past the problem. Each version of the software that attempted to scan the disk would hang the computer (or at least the user interface). The third day, the computer would power up complete initialization and within 5 minutes, the keyboard and mouse were no longer field by the OS. It was not until that point. Continue reading →
