google maps from address with jquery

One of my client need this feature of google maps from address so he must be able to enter the address in its admin panel and he want to show it as google map on front end.So i made this option for him and new post for my blog.you can use this code with any language like php c# java etc or any framework.googlemap by address

Google maps from address with jquery and map api

The idea behind google map from address is simple.It is based on reverse geocoding google map.I am using google map v3 api.

Lets get right to the topic

we will use google map api
https://maps.googleapis.com/maps/api/js?sensor=false
and jquery
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

To get map from google you need location’s longitude latitude
you can get location geocode from google map Geocoder function.

How google maps from address works

google map latitude longitude

Stage 1 : Your Address goes to geocoder.
address includes address, city/town , State, postalcode and country.
Function : google.maps.Geocoder();

Stage 2 : Geocoder fetch your address’s latitude and longitude.

Stage 3: These latitude and longitude value passed to the google map function.
Function : google.maps.Map();

Stage 4: The google map then represent these latitude and longitude value in map.
you can design your info window of address here by
Function : google.maps.InfoWindow()

Also you can set the title of your location by marker function.
Function : google.maps.Marker()

Feature of google maps from address widget

  • You can select from all the four view of google map.
    ROADMAP displays the normal, default 2D tiles of Google Maps.
    SATELLITE displays photographic tiles.
    HYBRID displays a mix of photographic tiles and a tile layer for prominent features.
    TERRAIN displays physical relief tiles for displaying elevation and water features.
  • You can set the zoom level of the map.
  • You can get longitude latitude from google maps address(can find geocode).
  • Find location by latitude longitude google map.

Download section

Live Demo Download Source

Create Bookmark Link Using Javascript

This post is how to create add to bookmark link for your blog or site
using this link in your site there may be a small increament in your blog with returning visitor.
initialy i found it on prestashop .
you can add a quick “Bookmark this page” link in all your pages so that user can bookmark their favorite pages or articles.
this script supported by IE, Mozilla Firefox and Opera Browsers.

function addBookmark(url, title){
if (!url) {url = window.location}
	if (!title) {title = document.title}
	var browser=navigator.userAgent.toLowerCase();
	if (window.sidebar) { // Mozilla, Firefox, Netscape
		window.sidebar.addPanel(title, url,"");
	} else if( window.external) { // IE or chrome
		if (browser.indexOf('chrome')==-1){ // ie
			window.external.AddFavorite( url, title);
		} else { // chrome
			alert('Please Press CTRL+D (or Command+D for macs) to bookmark this page');
		}
	}
	else if(window.opera && window.print) { // Opera - automatically adds to sidebar if rel=sidebar in the tag
		return true;
	}
	else if (browser.indexOf('konqueror')!=-1) { // Konqueror
		alert('Please press CTRL+B to bookmark this page.');
	}
	else if (browser.indexOf('webkit')!=-1){ // safari
		alert('Please press CTRL+B (or Command+D for macs) to bookmark this page.');
	} else {
		alert('Your browser cannot add bookmarks using this link. Please add this link manually.')
	}
}

You can call it from html by button or a hyperlink

here i m calling it from a button

Continue reading “Create Bookmark Link Using Javascript”

cascading dropdown using ajax Php and mysql.

dependent dropdown with ajax and php is very common to use script so I create one script for developers cascading dropdown ajax post is about how to create dependent dropdown with jQuery Mysql Php.I have seen there are many tutorial ,but this tutorial is populate dropdown using ajax with xml. In the example we will take 3 dependent dropdown list

Continue reading “cascading dropdown using ajax Php and mysql.”

Tooltip For Dropdown

What Is Tool Tip

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over. Tooltips don’t appear on mobile operating system, since there is no cursor.jQuery Tooltip For Dropdown display hit for each option you selected. Continue reading “Tooltip For Dropdown”