A) Sign up for Google Maps API
First step is to sign up for the Google maps API and get Google maps api key.
it will give you a big string of random characters like this ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA
Note : Google Maps API key is domain specific, so the same code posted here might not work for you. you will need to generate your own API key.
B) Worlds Latitude Longitude database
You will need all country,city name in the world and their Latitude Longitude locations. you can find it here google-maps-world-latitude-logitude.sql.
It contains all major cities and there Latitude Longitude locations.
Now, Lets start step by step.
1) Get started with Google Maps javascript and CSS
Add Google Maps default javascript and CSS
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=PUT-YOUR-API-KEY-HERE" type="text/javascript"></script>
2) Create canvas to hold Map
This div will hold Google Map view, set its width and height whatever you want.
3) Initialize Google Map
<script type="text/javascript">
var map;
function initialize() {
if (GBrowserIsCompatible()) {
// Attach canvas to google map object
map = new GMap2(document.getElementById("map_canvas"));
// set default location and zoom level
map.setCenter(new GLatLng(37.4419, -122.1419), 2);
// set map UI to default
map.setUIToDefault();
}
}
</script>
4) Get city location
I am fetching states and city through Ajax it was my requirement, you can use 3 plain drop down boxes. Only thing we are looking is Longitudes and Latitudes of our destination , that’s it !
Now lets take a look how we can
a) Find our city on google maps.
b) Place marker on specific location according to latitude and longitude.
function place_marker(lt,lg){
// Set latitude and longitudes
var point = new google.maps.LatLng(lt,lg);
// Move map to the particular point and zoom out the map
map.setCenter(point,5);
// Create our "tiny" marker icon
var marker = new GIcon(G_DEFAULT_ICON,'images/red.png');
marker.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
// Set GMarkerOptions object
markerOptions = { icon:marker };
// place marker that at location
var latlng = new GLatLng(lt,lg);
map.addOverlay(new GMarker(latlng, markerOptions));
}
5) No more steps, We are done !
Here is Live Demo
Google Maps JavaScript API Documentation
Google Maps JavaScript API Tutorials
Official Google Maps JavaScript API Blog
Google Maps JavaScript API Examples
About Amit
Wow this is great …. the best from the web resources!
Please be careful with your CSS: the DIV having id=”map_canvas” covers the first row of the table which contains the input to select the city.
Have a nice time.
Many thanks Emanuele….it was really overlapping the “select” boxes
and was making impression like this tutorial is about “how to show google map on a page” 
Cg
where i download this cocde
all code is explained there…but i think there should be a download link.
Thanks buddy i will add download link there.
where is the source code download? please share..thanks
where i download this code?
can you gave the source code…?
Added download link
thank you so much.,..your great,,,but I have problem in echo ”;
while($row = mysql_fetch_array($sql)){
echo ”.$row['country'].”;
}
I think u have not installed DB, Please download this file http://www.amitpatil.me/demos/Locate-city-on-Google-Maps-tutorial/google-maps-world-latitude-logitude.sql and install the DB, It should work.
should use <?php instead of <?
Great job Amit !!!
U can use anything…you might need to enable sort_tag_open settings in ini.
pointer is not working. i dont know how to bring that. please help me
Try to refresh the page or use same code i have provided in download link. it should work. If still it doesnt work send me download link.
sorry, but i very confused becuz i saw in table city, you had a CityID column, but you did have a table City. i mean, how do you get city name without table City?
I didnt get what’s ur problem exactly. Because there is a code to get cities in get_list.php and query also “select * from cities where CityId = $cid”
Hi Amit,
This is great!
BTW where did you get the http://www.amitpatil.me/demos/Locate-city-on-Google-Maps-tutorial/google-maps-world-latitude-logitude.sql file?
Does this required an update?
Many thanks!
Hi Amit,
Can I ask where did you get the google-maps-world-latitude-logitude.sql? Is this need to be updated constantly?
Thanks!
@jab : I dont remember where did i got this list…but i remember it took whole day to find correct and complete list.
m not sure but i think u need to update it.
I really appreciate with the above information. Thanks for this interesting information.
I really appreciate with the above information. Thanks for this interesting information.This is an excellent information forever. You have provided very valuable information here.
Great post. I found what I was looking for. Do you mind if I post this on my website and give you credit? If not, it’s ok.
Thanks, You can post this page on ur site but u cant post complete article just post few lines and give a back-link to my blog.
Give me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! I’m sure you had fun writing this article.
Thanks for taking the time to discuss about this, I feel strongly about it and love learning more on this topic. If possible, would you mind updating your blog with more information? It is extremely helpful for me.
Thanks for this great and interesting article. I really enjoyed the article. It’s really useful and informative for me.
Hello,
Great article. Thanks for sharing!
Can you please share country and state table details also.
Thanks this a great resource thank for the valuable information but i have one doubt please clarify me when google is providing me API to search in its database then why should i use this sql table What approach will be the best
Shall i go for google Search API or Use this sql Data
Mean to is there any specific need to save this data in my database because at all i have to search google
It depends on ur requirements, i am using it for cities latitude and longitudes.
Wow, its fantastic for automatically creating maps on web pages. By this Google map, you search any city where its present. Can I write about some points on this topic in my blog? Please reply.
Yes u can write about it if u are using the contents as it is then its must that u should provide backlink to my article.
Great post. Here’s a geocoding feature that will make your applications smarter and more interactive. Instead of displaying plain text, any address-centric data can be displayed on your site with a live map from Yahoo! or Google. Users will get more accurate information and be engaged in the process http://www.caspio.com/extend/platform-extensions/map-mashup.aspx
Thank you.. Very good info shared!!
Is there any solution about to mark all restaurant or specific keyword in specific location like rajkot , gujarat , india in php and map
Yes its possible….have a look at this tutorials http://www.google.com/mapmaker and http://www.sitepoint.com/google-maps-api-jquery/
Excellent job. Must be bookmarked:)
Howdy very cool website!! Man .. Beautiful .. Superb .. I will bookmark your web site and take the feeds additionally? I am satisfied to seek out a lot of useful info right here within the put up, we’d like develop extra strategies on this regard, thank you for sharing. . . . . .
how can i create it in php.
besides this i also want to add a maps search.
any suggestion
Its already in php, and also search is there, what exactly u r creating.
thx! I’m newbie, how do I use the sql file to update database?
open phpmyadmin and export the sql file.
hello!,I really like your writing very a lot!
proportion we communicate more approximately your article on AOL?
I need an expert on this area to unravel my problem. May be
that’s you! Taking a look ahead to see you.
Hi Amit,
This is Great DB u have share.!!!!
Its really Useful to me.But i am developing application in that i want all landmarks of particular country(latlong of all Landmarks in city and state from specific country).
Can u help me out from this.
Thanks in Advance,
Vishwajit
Sorry buddy i dont have that DB….all that i had, i shared with u.
One more thing….if u happen to find that DB please share with me. I want to make iphone web app using that DB.
Dude You save my soul ……..Love you …Thanks a lot …
Rewards like this inspire a looot, Thanks
Thanks a lot ,Having a such a good example of google and twitter api.