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
|
1 2 3 |
<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> |
|
1 |
2) Create canvas to hold Map
This div will hold Google Map view, set its width and height whatever you want.
|
1 |
3) Initialize Google Map
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
Wow this is great …. the best from the web resources!
Great Code Thanks! But please include sql dump of states & cities tables In downloads.
Dump is already there in the post, Please read between the lines.
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 https://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 https://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.
sir,
please help me on click on city show the two different address with google map of same city
Hi Amit,
Thank you very much for this information, but I have a query which might sound very silly but I am completely new to Google map stuff: From where should I download a database of different places of a particular city. Let’s say I wish to show a bus stop called “Vessy” in Geneva, Switzerland through the map for which I would be needing (I suppose) lat,long of Vessy. Similarly some other location of Geneva city, for which I need a database containing lat,long of all these places in Geneva city. Is it possible to get such database?
Manish, I have no idea, But i think you can find it somewhere through google.
Hi,
Firstly thanks a ton for this demo. Helped me a lot in another map i was making. I really appreciate your effort in publishing this demo.
I hope you can help me out here. I have no knowledge of any language.
I only need names of cities in the value and not ID so I changed
$html .= ”.$row[‘City’].”;
to this $html .= ”.$row[‘City’].”;
and deleted the last 5 lines starting from if($data == “city”){ since i do not want lat & long.
the output is now exactly what I need
Select
Delhi
Dilli
New Delhi
but when I open my edited get_list.php AND your downloaded unedited get_list directly in my browser both the files give me error
Notice: Undefined variable: data in C:\wamp\www\map\get_list.php on line 7
Notice: Undefined variable: data in C:\wamp\www\map\get_list.php on line 16
Notice: Undefined variable: data in C:\wamp\www\map\get_list.php on line 25
However, when i open your get_list from the demo here on your site, it’s blank.
P.S. I changed <? to <?php otherwise it was not working and the whole code was green color in the chrome view-source
I know this is too much to ask. Sorry if it takes a lot of your time. Thanks
EDIT: Changed from $row[‘CityId’] to $row[‘City’]
My output is now value=”Delhi”>Delhi<
HI, NICE CODE THANKS FRIEND,
I AM ALSO A WEB DEVELOPER. IN (MP)
m not abet to import .sql file it is giving me No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. such type of error
You have to change the upload limit or just try to import it though mysql DOS prompt.
Hi Amit,
Ya thanks a lot, its good example for me,
But i need Country code,City code from Current Position of LatLang,
(For example: I give latlang value it will fetch the Country Code(Numeric Code) as well as City Code(Numeric Code) for making a call function.)
sir,
please send the google map database
Link is there in the post “google-maps-world-latitude-logitude.sql”
sir ye problem Aa rahi hai….
Access denied for user ”@’localhost’ to database ‘map’
thanks sir ho gaya…
nice google maps………
Hi Amit ,
I m also like the same project for my eductaion ,is any other possibility as the same code on asp.net with c# to use
Thanks Amit for your post on Country State and City.
My query is that will it be possible to get area location names from city and import in database for future requirement.
Thanks in advance.
Pravin
i’m getting below issue
Can’t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock’ (2)
Its resolved now, Check now.
Hello Amit,
Hope you doing well!!!
I appreciate your work. I need your small help, do you have the database for the lat. long. for the borders (Lat. Long. for the whole border 360 across all the state) for all the state of India
Thanks Mr.Amith, Your code is very useful for me…but one thing if i select the state,city marker is not working properly…i don’t know what is the reason please clarify this issue…..
Its because there wont be any city for the selected state, its working fine check again.
Hi dear,
i am working on map and i have data base with only address and i want to show marks on google map based on address which stored in my database.
please help me if you have any idea
working in c#.net
thanks for your post it helps me
Hi Amit,
Nice one.
Is there any tutorial to get updated city name and location name(the one you have given in SQL). How can I get these details problematically using Google API (or by any other means) and put those in a database?
Please let me know. Many thinks.