Google-maps – Pinpoint location (latitude & longitude) in Google Maps

geolocationgoogle mapsgoogle-maps-api-3location

I have data of a location's latitude and longitude. I want to display it into a map in my application. I planned to use Google Maps to display this location to user.

To do this, would I need the Google Maps API? or the Google Maps Coordinate?
I've looked into their website, but all those varieties just makes me confused.
I only need it to display the data (latitude and longitude) into visual (map) to make my application more user-friendly.

I have never used Google Maps API before, so for those that have experience in it, please guide me.

Google Maps API : http://www.google.com/enterprise/mapsearth/products/mapsapi.html#

Google Maps Coordinate: http://www.google.com/enterprise/mapsearth/products/coordinate.html?rd=1#

On a side note, I might sell the application (using subscription), so I would need the Google Maps API license. Anyone know how much it is and how is the procedure? (e.g., monthly or yearly basis, per user or per use, etc.)

EDIT

Or is there any other API for the mapping? something like Google Maps API.

Best Answer

We have to give latitude and longitude .

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    window.onload = function () {
        var mapOptions = {
            //give latitude and long
            center: new google.maps.LatLng("18.9750", "72.8258"),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            //give latitude and long
        var myLatlng = new google.maps.LatLng("18.9750", "72.8258");
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Mumbai"
        });
    }
</script>

<div id="dvMap" style="width: 500px; height: 500px">

Related Solutions

Android – How to get the current GPS location programmatically in Android

I have created a small application with step by step description to get current location's GPS coordinates.

Complete example source code is in Get Current Location coordinates , City name - in Android.

See how it works:

All we need to do is add this permission in the manifest file:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

And create a LocationManager instance like this:

LocationManager locationManager = (LocationManager)
getSystemService(Context.LOCATION_SERVICE);

Check if GPS is enabled or not.

And then implement LocationListener and get coordinates:

LocationListener locationListener = new MyLocationListener();
locationManager.requestLocationUpdates(
LocationManager.GPS_PROVIDER, 5000, 10, locationListener);

Here is the sample code to do so

/*---------- Listener class to get coordinates ------------- */
private class MyLocationListener implements LocationListener {

    @Override
    public void onLocationChanged(Location loc) {
        editLocation.setText("");
        pb.setVisibility(View.INVISIBLE);
        Toast.makeText(
                getBaseContext(),
                "Location changed: Lat: " + loc.getLatitude() + " Lng: "
                    + loc.getLongitude(), Toast.LENGTH_SHORT).show();
        String longitude = "Longitude: " + loc.getLongitude();
        Log.v(TAG, longitude);
        String latitude = "Latitude: " + loc.getLatitude();
        Log.v(TAG, latitude);

        /*------- To get city name from coordinates -------- */
        String cityName = null;
        Geocoder gcd = new Geocoder(getBaseContext(), Locale.getDefault());
        List<Address> addresses;
        try {
            addresses = gcd.getFromLocation(loc.getLatitude(),
                    loc.getLongitude(), 1);
            if (addresses.size() > 0) {
                System.out.println(addresses.get(0).getLocality());
                cityName = addresses.get(0).getLocality();
            }
        }
        catch (IOException e) {
            e.printStackTrace();
        }
        String s = longitude + "\n" + latitude + "\n\nMy Current City is: "
            + cityName;
        editLocation.setText(s);
    }

    @Override
    public void onProviderDisabled(String provider) {}

    @Override
    public void onProviderEnabled(String provider) {}

    @Override
    public void onStatusChanged(String provider, int status, Bundle extras) {}
}

Javascript – Google Maps JS API v3 – Simple Multiple Marker Example

This is the simplest I could reduce it to:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
      
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Edit/fork on a Codepen →

SCREENSHOT

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:

❯ Mozilla Dev Center: Working with Closures

Best Answer

Related Solutions

Android – How to get the current GPS location programmatically in Android

Javascript – Google Maps JS API v3 – Simple Multiple Marker Example

Related Topic