Ajax Loader
×
HTML 
 
1
 
2
<style type="text/css">
3
  html { height: 100% }
4
  body { height: 100%; margin: 0; padding: 0 }
5
 
6
  .content { height: 100%; }
7
  #map_canvas { height: 100% }
8
 
9
  .lolz {
10
    background: #424d56;
11
    background: rgba(0,0,0,0.6);
12
    padding: 0px 5px;
13
    text-align: center;
14
    color: #fff;
15
  }
16
 
17
  .lolz .arrow {
18
    position: absolute;
19
    width: 0;
20
    height: 0;
21
    border-color: #424D56 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
22
    border-style: solid;
23
    border-width: 0.5em;
24
    bottom: -0.85em;
25
    left: 50%;
26
    margin-left: -0.5em;
27
  }
28
</style>
29
 
30
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCnUOdTsQ4gLFNNIRBP7B76103emSzjpxk&amp;sensor=false"></script>
31
 
32
<section class="content">
33
 
34
  <div id="map_canvas"></div>
35
 
36
</section>
37
 
38
<script>
39
40
  google.maps.visualRefresh = true;
41
 
42
var geocoder = new google.maps.Geocoder();
43
 
44
function initialize() {
45
  var position = new google.maps.LatLng(21.0000, 78.8718);
46
47
  var styles_array = [
48
    {
49
      featureType: 'administrative.country',
50
      elementType: 'labels',
51
      stylers: [
52
        { visibility: 'off' }
53
      ]
54
    },
55
    {
56
      featureType: 'landscape',
57
      elementType: 'geometry',
58
      stylers: [
59
        { saturation: 10 },
60
        { lightness: 0 },
61
        { gamma: 1.51 }
62
      ]
63
    }
64
  ];
65
 
66
  var mapOptions = {
67
    center: position,
68
    zoom: 8,
69
    mapTypeId: google.maps.MapTypeId.ROADMAP,
70
    panControl: false,
71
    zoomControl: true,
72
    zoomControlOptions: {
73
      style: google.maps.ZoomControlStyle.SMALL
74
    },
75
    mapTypeControl: false,
76
    styles: styles_array
77
  };
78
79
  // RENDER MAP
80
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
81
 
82
  // FIT THE MAP TO INDIA (JUST SHOW INDIA)
83
  // USE Geocoding to figure the bounding lat/long for India
84
 
85
  // ASYNC REQUEST
86
  var address = 'India';
87
  geocoder.geocode( { 'address': address }, function(results, status) {
88
    if (status == google.maps.GeocoderStatus.OK) {
89
      map.setCenter(results[0].geometry.location);
90
      // show markers if you want to
91
    }
92
    else {
93
      alert('Geocode was not successful for the following reason: ' + status);
94
    }
95
  
96
    var bounds = results[0].geometry.viewport;
97
    map.fitBounds(bounds);
98
    map.setOptions({ zoom: 4 });
99
  });
100
 
101
 
102
  var image = new google.maps.MarkerImage(
103
    'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
104
    new google.maps.Size(32, 32), // size
105
    new google.maps.Point(0, 0), // origin
106
    new google.maps.Point(0, 0) // anchor
107
  );
108
 
109
  var homeMarker = new google.maps.Marker({
110
    position: position,
111
    map: map,
112
    title: "Check this cool location",
113
    flat: false,
114
    //icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
115
    icon: image,
116
    shadow: "http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png"
117
  });
118
 
119
  return; // end of initialize
120
}
121
 
122
// HIT `initialize()` ONLOAD
123
google.maps.event.addDomListener(window, 'load', initialize);
124
</script>
 

Untitled

CSSDeck G+