My favorites ▼ | Sign in
Project Home Downloads Wiki Issues Source
Checkout   Browse   Changes    
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Circle Overlay</title>

    <style type="text/css">
      #map {
        width: 800px;
        height: 500px;
      }
    </style>

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

    <script type="text/javascript">
      /**
       * Called on the initial page load.
       */
      function init() {
        var mapCenter = new google.maps.LatLng(0, 0);
        var map = new google.maps.Map(document.getElementById('map'), {
          'zoom': 1,
          'center': mapCenter,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });

        // Create a draggable marker which will later on be binded to a
        // Circle overlay.
        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(55, 0),
          draggable: true,
          title: 'Drag me!'
        });

        // Add a Circle overlay to the map.
        var circle = new google.maps.Circle({
          map: map,
          radius: 3000000 // 3000 km
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
      }
      
      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <h1>Drag the marker to move the circle</h1>
    <div id="map"></div>
  </body>
</html>

Change log

r143 by lu...@google.com on Jun 8, 2010   Diff 
fixing doctype
Go to: 
Project members, sign in to write a code review

Older revisions

r70 by d...@google.com on Feb 10, 2010   Diff 
Clean up to match template
r68 by d...@google.com on Feb 10, 2010   Diff 
Update mime type to text/html
r67 by d...@google.com on Feb 10, 2010   Diff 
Add Circle overlay example to demo
gallery.
All revisions of this file

File info

Size: 1785 bytes, 59 lines

File properties

svn:mime-type
text/html
svn:executable
*
Powered by Google Project Hosting