asked on

Replace Google Map Theme with Custom Image in Google Maps API version 2

I am using Google MAPS API Ver 2. In my webpage a world image is shown with default google map theme. I need to replace that theme with my custom image and remove all extra controls from map.

Here is my some sample code using Google Maps API Version 2.

<body onload="initialize()">
<?php

include('db.php');

$sql = "SELECT id, node_id, latitude, longitude,country FROM tbl where country<>'' and nid = $nid order by country ";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $city_array=array();
    $country_name_array=array();

    while($row = $result->fetch_assoc()) {        
		$country_id=$row["country"];		
	    $nodeid_val=$row["node_id"];
        $name=$row["country"];
        $status=['code'=>200,'request'=>'geocode'];
        $placemark=[
          'address'=>$row["country"],
          'population'=>'',
          'Point'=>['coordinates'=>[$row["longitude"],$row["latitude"],0]]

        ];

        $city_array[]=[
          'country_id'=>$country_id,	
		  'nodeid_val'=>$nodeid_val,
          'name'=>$name,
          'Status'=>$status,
          'Placemark'=>$placemark,

        ];

        $country_name_array[]=['name'=>$name];
    }
} else {
    //echo "0 results";
}

$city_details=json_encode($city_array,true);
mysqli_close($conn);

?>

<script type="text/javascript">	

		// Builds an array of geocode responses 
		var city = <?php echo $city_details; ?>;

		function initialize() {
			map = new GMap2(document.getElementById("map_canvas"));
			map.setCenter(new GLatLng(25.263856, 51.497131), 3);
		}

		function addAddressToMap(response) {
			

			jQuery('div.map-sidebar').removeClass("closed"); //open panel on Country selection
			jQuery(".country-list-dd").removeClass("out");
			map.clearOverlays();

			var place = city[response].Placemark;
			var point = new GLatLng(place.Point.coordinates[1],
				place.Point.coordinates[0]);
			map.setCenter(point, 6);
			//map.openInfoWindowHtml(point, "<b>City:</b> " + place.address);      


			/*if (lang_name == 'en') {
				map.openInfoWindowHtml(point, "<b>Country:</b> " + place.address);
			} else {
				map.openInfoWindowHtml(point, "<b>بلد</b> ");
			}*/


			var country_id = city[response].country_id;
			var node_id = city[response].nodeid_val;


			projectlist(country_id, node_id);
		}
</script>

Open in new window