Displaying metro cities of India in google maps

webtutplus By webtutplus, 30th Jul 2015 | Follow this author | RSS Feed
Posted in Wikinut>Guides>Web>JavaScript

Hello Folks. Today we will do something interesting. We all have seen google maps. Today we will build a simple web application using google chart api, where we will mark metro cities of India.

Step 1:- Create basic Map

As usual we will use our basic bootstrap template. I will add script for google map api. I will also set a div in body tag which will contain the map.


<!DOCTYPE html>

<html>

<head>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"

rel="stylesheet">

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function initialize() {

var mapProp = {

center:new google.maps.LatLng(28.6139,77.2090),

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>



</head>

<body>

<div class="container">

<div id="googleMap" style="width:700px;height:500px;margin:0 auto"></div>



</div>





</body>

</html>


As you can see, the code is pretty straight forward. The latitude and longitude of delhi are 28.6139,77.2090 respectively. I have made it center in intialize javascript function. I have made zoom 4 and mapetype road, so that I can the entire India.
I also added a DOM listener that will execute the initialize() function when the page is loaded.

Step2:- Get latitude and longitude of main cities of India


a) Kolkata : 22.5667° N, 88.3667° E

b) Mumbai :- 18.9750° N, 72.8258° E

c) hyderabad :- 17.3700° N, 78.4800° E

d) Bangalore :- 12.9667° N, 77.5667° E

e) Delhi :- 28.6139° N, 77.2090° E

Let display these five cities in marker.

Step3:-Display one city in marker

Lets display mumbai in marker.

Add the code snippet inside initialize function.

var center = new google.maps.LatLng(18.9750, 72.8258);

var marker=new google.maps.Marker({

position:center,

});



marker.setMap(map);


I declared a center variable and added latitude and longitude of mumbai there. It is basically a google map object, which take latitude and logitude as parameter.
Then I declared a variable marker, which is again a google map object. I passed the variable center there. Finally I set the market in map by marker.setMap method.

Step 4:- Now I will make an array, push all the latitudes and longitudes of the cities and display in map.

a) Declare a js variable pos_array and enter all the latitude and longitude one by one.
var pos_array = ,

,

,

,



];

b) Now iterate through the array by a for loop and display the markers one by one.

for (i = 0; i < pos_array.length; i++) {

var center = new google.maps.LatLng(pos_array, pos_array);

var marker=new google.maps.Marker({

position:center,

});

marker.setMap(map);



}

The entire code will be

<!DOCTYPE html>

<html>

<head>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"

rel="stylesheet">

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>

function initialize() {

var mapProp = {

center:new google.maps.LatLng(28.6139,77.2090),

zoom:4,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);





var pos_array = ,

,

,

,



];



for (i = 0; i < pos_array.length; i++) {

var center = new google.maps.LatLng(pos_array, pos_array);

var marker=new google.maps.Marker({

position:center,

});

marker.setMap(map);



}

}



google.maps.event.addDomListener(window, 'load', initialize);

</script>



</head>

<body>

<div class="container">

<div id="googleMap" style="width:700px;height:500px;margin:0 auto"></div>



</div>





</body>

</html>

Tags

Google Maps, Javascript, Php Web Development, Web Development

Meet the author

author avatar webtutplus

We are people trying to make web development and programming easy for you. We write tutorials on wide range of programming areas.Thank you for your extended support.

Share this page

moderator Mark Gordon Brown moderated this page.
If you have any complaints about this content, please let us know

Comments

author avatar Retired
30th Jul 2015 (#)

All beyond me that. But I hope one day I will be able to visit India.

Reply to this comment

author avatar webtutplus
31st Jul 2015 (#)

Hi @coffeQueen
please visit http://webtutplus.com/displaying-metro-cities-of-india-in-google-maps/ . I can assure, you will understand something

Reply to this comment

author avatar Retired
2nd Nov 2015 (#)

Great article all the way

Reply to this comment

Add a comment
Username
Can't login?
Password