How to display black & white google map

 
For display google map black and white then you have to set below script in your google map code.

  var mapOptions = new Object();
  mapOptions.styles = [{featureType:'all',stylers:[{saturation:-100},{gamma:0.50}]}];

Below is a eaxmple for display black & white google map

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

function createMap(lat, lng, zoomVal)
{
      var mapOptions ={
          center: new google.maps.LatLng(lat, lng),    
          zoom: zoomVal,   
          scrollwheel: false,  
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles : [{featureType:'all',stylers:[{saturation:-100},{gamma:0.0}]}]
      };
      map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
      markerData = {0:{lat:21.5200,lng:70.4700,url:'http://hariomrubber.com/',icon:"http://labs.google.com/ridefinder/images/mm_20_red.png",title:"Hariom Rubber",data:{drive:false, zip:"362002",region:"Gujarat", city:"Junagadh", address:" Murlidhar So-1"}},1:{lat:23.0300,lng:72.5800,icon:"http://labs.google.com/ridefinder/images/mm_20_purple.png",title:"TYPO Help",data:{drive:false, zip:"380058",region:"Gujarat", city:"Ahmedabad", address:"Bodakdev"}}};
 
      for(markerId in markerData)
      {
          markers[markerId] = createMarker(markerData[markerId]);
      }
}

function createMarker(data)
{
      var myLatLng = new google.maps.LatLng(data.lat, data.lng);

      var marker = new google.maps.Marker({
          position: myLatLng,
          icon: data.icon,
          map: map,
          title: data.title
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = data.url;
      });
    return marker;
}

var map;
var markers = {};

function initialize() {
  createMap(21.0000,78.0000,5);
}

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

</script>

<div id="googleMap" style="width:1000px; height:800px;"></div>

It will look like below image

Black & White google Map

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements

How to get Latitude and Longitude from Country or city using PHP

 

Hariom Reclaim Rubber
Hariom Rubber is a leading manufacturer, supplier and exporter of rubber products in India and abroad. With a dedicated team both in office and at production, Hariom Rubber is committed to grow along with its customers.

 
How to get latitude and longitude from address in php
 
You can use country name for get Latitude and Longitude and also use full address instead of city or country

$address = 'india';

Or also you can use CIty name for get Latitude and Longitude

$address = 'Junagadh';

Or you can also use city, state and Country togther.

$address = 'Junagadh+Gujarat+India';

There are two method for get Latitude and Longitude

First is :

$details_url = "http://maps.googleapis.com/maps/api/geocode/json?address=".$address."&sensor=false";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $details_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = json_decode(curl_exec($ch), true);

// If Status Code is ZERO_RESULTS, OVER_QUERY_LIMIT, REQUEST_DENIED or INVALID_REQUEST
if ($response['status'] != 'OK') {
	return null;
}

//print_r($response);
//print_r($response['results'][0]['geometry']['location']);

$latLng = $response['results'][0]['geometry']['location'];

$lat = $latLng['lat'];
$lng = $latLng['lng'];	

OR
Second method is:

$geocode_stats = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?address=india&sensor=false");

$output_deals = json_decode($geocode_stats);

$latLng = $output_deals->results[0]->geometry->location;

$lat = $latLng->lat;
$lng = $latLng->lng;	

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to Get county name from latitude and longitude Using PHP

 
For get county name from latitude and longitude Using PHP

$geocode_stats = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?latlng=23.0333,72.6167&sensor=false");
$output_deals = json_decode($geocode_stats);
$country = $output_deals->results[2]->address_components[4]->long_name;

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to Get Current country name and latitude and longitude using Javascript

Get Current country name and latitude and longitude using Javascript

$.getJSON('http://smart-ip.net/geoip-json/?callback=?', function (data) {
    $("#hello").html('Latitude: ' + data.latitude +
        '<br /> Longitude: ' + data.longitude +
        '<br /> Country: ' + data.countryName);
});

<div id="hello"></div>

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Display Location on map with Population

For Display any kind of data or product in selected city with country then you can use below code

 <script type='text/javascript' src='https://www.google.com/jsapi'>
 </script>
 
 <script type='text/javascript'>
 
 google.load('visualization', '1', {'packages': ['geochart']});
 
 google.setOnLoadCallback(drawMarkersMap);

 function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City',       'Population', 'Area'],
    ['Junagadh',   2761477,      1285.31],
    ['Veraval',    761477,       85.31],
    ['Rajkot',     1324110,      81.76],
    ['Ahmedabad',  959574,       17.27],
    ['Mumbai',     907563,       130.17],
    ['Amreli',     97563,        31.17],
    ['Upleta',     9563,         32.17],
    ['Surat',      655875,       158.9],
    ['Porbandar',  07906,        243.60],
    ['Bhavnagar',  380181,       140.7],
    ['Baroda',     371282,       102.41],
    ['Goa',        67370,        213.44],
    ['Bhuj',       67370,        213.44],
    ['Delhi',      52192,        43.43],
    ['Pune',       348262,       110],
    ['Chennai',    382642,       101],
    ['Culcutta',   38622,        31],
    ['Banglore',   38262,        81],
    ['Patna',      81262,        71],
    ['Indore',     28262,        30],
    ['Bopal',      3262,         81],
    ['Kashmir',    322,          76],
    ['Cochin',     4321,         20],
    ['Jaipur',     4322,         30],
    ['Silong',     4323,         40],
    ['Agartala',   4324,         50],
    ['Nagaland',   4325,         60],
    ['Vijayvada',  32,           58],
    ['Sikkim',     22,           58],
    ['Puri',       35,           39],
    ['Raipur',     25,           29],
    ['Jodhpur',    607906,       243.60],
    ['Kargil',     607916,       246.60],
    ['Nagpur',     6,            26.60],
    ['Solapur',    60916,        46.60],
    ['Lucknow',    6916,         146.60],
    ['Amritsar',   696916,       16.60],
    ['changlang',  696916,       14.60],
    ['Lunglei',    496916,       19.60],
  ]);

  var options = {
    region: 'IN',
    displayMode: 'markers',
    colorAxis: {colors: ['green', 'blue']}
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
 };
</script>


<div id="chart_div" style="width: 900px; height: 500px;"></div>

It will look like below image

Display Location on map with Population

*Note : Population data is a dummy data for testing purpose

How to display google map as image

  

Latitude = ‘21.53357’;
Longitude = ‘70.45404’;
Map Type = hybrid ( ROADMAP , SATELLITE ,HYBRID ,TERRAIN )
Markers Color : Purple
Markers Label : J
Map Size = 600×350 ( Widht * Height)
Zoom Level : 13

You can also set title on map

Below code is for display google map as image

  
<img src=”http://maps.google.com/maps/api/staticmap?center=21.53357,70.45404&zoom=13&markers=color:purple%7Clabel:J%7C21.53357,70.45404&size=600×350&maptype=hybrid&sensor=false&#8221; border=”1″ title=”Jainish Senjaliya” alt=”Jainish Senjaliya” />
  

Output : 

  

If you want to set link of image and that is redirect to google map then you can use below code.

<a href=”https://maps.google.ch/maps?f=q&hl=en&q=Jainish Senjaliya @21.53357,70.45404&zoom=12&markers=size:small%12Ccolor:0xF35834%7C21.53357,70.45404&maptype=satelite&sensor=false&t=k&z=12&om=1&#8243; target=”_blank”> <img src=”http://maps.google.com/maps/api/staticmap?center=21.53357,70.45404&zoom=13&markers=color:purple%7Clabel:J%7C21.53357,70.45404&size=600×350&maptype=hybrid&sensor=false&#8221; border=”1″ title=”Jainish Senjaliya” alt=”Jainish Senjaliya” />
</a>
  

Output :