topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

mashup-amazon-11-11-01-YahooMaps-02-mapMarker.htm / htm


  <html>
  <head>
  
      <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=[YOUR ID HERE]"></script>
  
      <link href="styles.css" rel="stylesheet" type="text/css" />    
  </head>
  <body onload="InitMap()">        
  
                  <div id="myMap">
                  </div>                                          
               <div id="controls">
                  <a href="javascript:void(0)" onclick="AddMarker();">Add Marker</a><br />
                  <a href="javascript:void(0)" onclick="AddCustomMarker();">Add Custom Image Marker</a><br />
                  <a href="javascript:void(0)" onclick="myMap.removeOverlay(myCustomMarker);">Hide Custom Image Marker</a><br />
                  <a href="javascript:void(0)" onclick="YLog.print(myMarker);">Show Logger</a>
                  <div id="details">Details show here. </div>
              </div>
  
      <script type="text/javascript">
      var myMap ;
      var myMarker;
      var myCustomMarker;
   
      function InitMap() {
          // Initialize the map
          myMap = new YMap(document.getElementById('myMap'));
          // Draw the map at New York City level
          myMap.drawZoomAndCenter("New York", 4);
      }
      
      function AddMarker() {
          // Create a new point
          var myPoint = new YGeoPoint(40.70417, -74.00778);
  
          // Create a marker at that point
          myMarker = new YMarker(myPoint);
  
          // Add a label to the marker
          myMarker.addLabel("A");
  
          // Add auto expand
          var myMessage = '<div>Click for more</div>';
          myMarker.addAutoExpand(myMessage);
  
          // Add it to the map
          myMap.addOverlay(myMarker);                
      }
      
      function AddCustomMarker() {
          // Create a new point
          var myPoint = new YGeoPoint(40.72, -74.01);
          
          // Define a size for the marker
          var mySize = new YSize(100, 120);
          
          // Create a new image for this marker
          var myImage = new YImage("images/myMarker.gif", mySize);
          
          // Create a marker at that point with a custom Image        
          myCustomMarker = new YMarker(myPoint, myImage);      
  
          // Add auto expand
          var myMessage = '<div>This is an example of a custom Image Marker. Click here. </div>';
          myCustomMarker.addAutoExpand(myMessage );
  
          // Capture the click event
          YEvent.Capture(myCustomMarker,EventsList.MouseClick, 
              function() { document.getElementById('details').innerHTML = "<b>You clicked the custom marker</b>"; });
          
          // Add it to the map
          myMap.addOverlay(myCustomMarker);                
      }
  
      </script>
  
      <img id="borderRight" src="images/right.gif" />
      <img id="borderLeft" src="images/left.gif" />
      <img id="borderTop" src="images/top.gif" />
      <img id="borderBottom" src="images/bottom.gif" />
  
  </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.