Click here to Skip to main content
15,868,051 members
Articles / Web Development / CSS3

Using Google Maps API

Rate me:
Please Sign up or sign in to vote.
4.25/5 (3 votes)
9 Jun 2016MIT3 min read 18.1K   9   12   2
A brief article on how to use Google Maps API and IPinfo to generate some Maps

Introduction

I am somewhat of a beginner programmer, and am on my quest to learn. I have always liked utilizing Google maps and using the little maps that developers put on their customers sites, so I took it upon myself to learn how to do it!

Background

The code started when I saw a how to on W3 Schools here. The IPInfo was a site I found out about for a previous project. I wanted to use the location co ordinates from the IP info to make a map of where at least your ISP is routing your internet connection from!

Using the Code

IPINFO.IO

This is the API to get the Location of your IP Address or at least the one your ISP will provide the API.

By going to Ipinfo.io, the site will give you your IP Address and some further information about your location.

Image 1

The information required to use Google Maps is the Latitude and Longitude. The API provides some JSON with the above information. This example is a wee bit lacking as it is missing the city and region from the DATA due to where my ISP is locating my IP address from. The API provides some information by getting this data by JQuery Ruby NodeJS Python and curl.

The JQuery looks like this:

Image 2

The code in my App look as such. I get the JSON and place it into a variable called place. The Object Grid will contain all the information supplied by the API. Below is a copy from the console.

Object { ip: "69.34.118.3", hostname: "mo-69-34-118-3.sta.embarqhsd.net", city: "",
region: "", country: "US", loc: "37.7510,-97.8220", org: "AS18494 Embarq Corporation" } 

The code below will generate this code. The location I can extract by just calling grid.loc. I then need to split the co ordinates as my mapping code had some issues reading the combined co-ordinates. So I split them to utilize as co-ordinates.

C++
// Any source code blocks look like this

// call API
var place = $.getJSON('http://ipinfo.io', function(grid){
console.log(grid.ip)
// check IP
console.log(grid.loc)

var loc = grid.loc;
// check Grid
//split co ordiantes
var str_array = loc.split(',');

//

Google Maps API

If you look above, the co-ordinates are positive value, then a negative value. The negative value in the second co-ordinate denotes the Western Hemisphere, a positive value would denote the Eastern Hemisphere. So the location of Germany or Greece would have two positive values. The mainland USA and Canada would have a positive then negative value. Australia would have a negative for N/S then positive value for E/W while South America would have two negative values.

Google Maps Long Lat Coordinates for Places Around the world.

  • Montevideo Uruguay -34.9011, -56.1645
  • Perth Australia -31.9535, 115.8570
  • Berlin Germany 52.5200, 13.4050
  • Athens Greece 37.9838, 23.7275
  • Kansas City MO 39.0997, -94.5786

To create a Google map on your site, you firstly need to add the reference to the API and its JS which is:

JavaScript
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Then below, you need only two pieces of JS; one is where you wish to map the co-ordinates and then the map esthetics. In the cases below, the map has a zoom set to 10 and the coordinated location is centered to the map. The second part of the code takes an HTML element and this is then populated with the MAP.

GOOGLE MAPS JS

JavaScript
// Any source code blocks look like this

var firstMap = {
       center: new google.maps.LatLng( 30.8225, 28.9543), zoom: 10
     }
     var map = new google.maps.Map(document.getElementById("map"), firstMap);
    
     
     var secondMap = {
       center: new google.maps.LatLng(str_array[0],str_array[1]), zoom: 10
     }
     var map2 = new google.maps.Map(document.getElementById("map1"), secondMap);
     
    
     var thirdMap = {
       center: new google.maps.LatLng(48.7,44.51), zoom: 10
     }
     var map3 = new google.maps.Map(document.getElementById("map2"), thirdMap);

      
     var forthMap = {
       center: new google.maps.LatLng(49.3365, -0.4617), zoom: 10
     }
     var map4 = new google.maps.Map(document.getElementById("map3"), forthMap);
      
      var fithMap = {
       center: new google.maps.LatLng(49.3100, -0.3286), zoom: 10
     }
     var map5 = new google.maps.Map(document.getElementById("map4"), fithMap);
      
      var sixthMap = {
       center: new google.maps.LatLng(49.3697, -0.8711), zoom: 10
     }
     var map5 = new google.maps.Map(document.getElementById("map5"), sixthMap);
//

GOOGLE MAPS HTML

HTML
<div class="row">
     <div class="col-md-4">
         <h4>El Alamein</h4>
       <div id="map" >
         
       </div>
     </div>
     
     <div class="col-md-4">
         <h4>Possibly Your Location or your isp server location</h4>
       <div id="map1" >
         
       </div>
     </div>
     <div class="col-md-4">
         <h4>Stalingrad</h4>
       <div id="map2" >
         
       </div>
     </div>
   </div>
   <div class="row">
      
     <div class="col-md-4">
         <h4>Juno Beach</h4>
       <div id="map3" >
         
       </div>
     </div>
     
     <div class="col-md-4">
         <h4>Sword Beach</h4>
       <div id="map4" >
         
       </div>
     </div>
     <div class="col-md-4">
         <h4>Omaha Beach</h4>
       <div id="map5" >
         
       </div>
     </div>
   </div>

GOOGLE MAPS CSS

CSS
#map
{
   height: 400px;
   padding: 10px;
}

#map1
{
   height: 400px;
   padding: 10px;
}

#map2
{
   height: 400px;
   padding: 10px;
}

#map3
{
   height: 400px;
   padding: 10px;
}

#map4
{
   height: 400px;
   padding: 10px;
}

#map5
{
   height: 400px;
   padding: 10px;
}

body
{
   margin: 10px;
}

References

  • http://www.w3schools.com/howto/howto_google_maps.asp
  • https://ipinfo.io/

Points of Interest

This is just a basic app to use some mapping APIs to create your own content.

History

  • 9th June, 2016: Initial version

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Software Developer (Junior) ABB
United States United States
On career 2.0 mainly work in the dot net environment predominantly SQL and SSMS.

Comments and Discussions

 
GeneralMedical Dialogues Pin
Member 1257639310-Jun-16 0:14
Member 1257639310-Jun-16 0:14 
GeneralRe: Medical Dialogues Pin
MarcusCole683310-Jun-16 4:32
professionalMarcusCole683310-Jun-16 4:32 
Where did you use the code on the site? Moreover, did you use only google or did you use the IPInfo API as well?

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.