Find city Google Maps API Tutorial

This is simple and basic tutorial Find city Google Maps API tutorial is intended to help you create your own interactive google maps page using the Google API to Find city Google Maps API and locate particular city on google maps.

I) Prerequisites

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.

II) Tutorial

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

Live DemoDownload

III) More References

Google Maps Official Page

Google Maps JavaScript API Documentation

Google Maps JavaScript API Tutorials

Official Google Maps JavaScript API Blog
Google Maps JavaScript API Examples

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. Wow this is great …. the best from the web resources!

  2. 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 :o and was making impression like this tutorial is about “how to show google map on a page” :D :D :D

  3. Cg

  4. 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.

  5. where is the source code download? please share..thanks

  6. where i download this code?

  7. can you gave the source code…?

  8. Added download link :)

  9. thank you so much.,..your great,,,but I have problem in echo ”;
    while($row = mysql_fetch_array($sql)){
    echo ”.$row[‘country’].”;
    } :(

  10. 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.

  11. 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”

  12. 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!

  13. 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.

  14. I really appreciate with the above information. Thanks for this interesting information.

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. Thanks for this great and interesting article. I really enjoyed the article. It’s really useful and informative for me.

  20. Hello,
    Great article. Thanks for sharing!
    Can you please share country and state table details also. :)

  21. 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 :)

  22. 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.

  23. 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

  24. Thank you.. Very good info shared!!

  25. Is there any solution about to mark all restaurant or specific keyword in specific location like rajkot , gujarat , india in php and map

  26. Excellent job. Must be bookmarked:)

  27. 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. . . . . .

  28. how can i create it in php.
    besides this i also want to add a maps search.
    any suggestion

  29. thx! I’m newbie, how do I use the sql file to update database?

  30. 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.

  31. 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.

  32. Dude You save my soul ……..Love you …Thanks a lot …

  33. Thanks a lot ,Having a such a good example of google and twitter api.

  34. sir,
    please help me on click on city show the two different address with google map of same city

  35. 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?

  36. 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

  37. EDIT: Changed from $row[‘CityId’] to $row[‘City’]
    My output is now value=”Delhi”>Delhi<

  38. HI, NICE CODE THANKS FRIEND,
    I AM ALSO A WEB DEVELOPER. IN (MP)

  39. 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

  40. 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.)

  41. sir,
    please send the google map database

  42. sir ye problem Aa rahi hai….

    Access denied for user ”@’localhost’ to database ‘map’

  43. thanks sir ho gaya…
    nice google maps………

  44. 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

  45. 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

  46. i’m getting below issue
    Can’t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock’ (2)

  47. 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

  48. 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…..

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in Ajax, jQuery, Misc, PHP, Uncategorized (32 of 47 articles)


Mystique is one of the top most free theme used for wordpress. It is bundled with many inbuilt features but ...