Ajax jQuery Misc PHP Uncategorized

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

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

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.

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


Leave a Comment


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


Let your friends know what are you reading

Share this post with your friends!