asked on

Legend on Google Map

Is it possible to add legend or overlay a content on the google map ? If not, it there any workaround solution on this ?

Thanks

<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<style type="text/css">
  
 html { height: 100% }
  
 body { height: 100%; margin: 0px; padding: 0px }
  
 #map_canvas { height: 100% }

</style>


<title>UPC Wind Farm Map</title>

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


<script type="text/javascript">
  
    function initialize() {
    
     // www.gpsvisualizer.com/geocode
      var myLatlng = new google.maps.LatLng(26.254092, 107.5221);
    
      var myOptions = {
      
         zoom: 4,
      
         disableDefaultUI: true, 
         center: myLatlng,
      
         mapTypeId: google.maps.MapTypeId.ROADMAP
    
      }
    

      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  

   //Qianan
      var myLatlng = new google.maps.LatLng(26.254092, 107.5221); 
  
      var marker = new google.maps.Marker({       
         position: myLatlng,        
         draggable:false,
         animation: google.maps.Animation.DROP,
         map: map,       
         title:"Qianan Wind Farm"     
      }); 
      google.maps.event.addListener(marker, 'click', toggleBounce); 
  

    function toggleBounce() {    


      } 


}

</script>

</head>


<body onload="initialize()">
  
   <div id="map_canvas"></div>

</body>

</html>

Open in new window

Legend-on-Google-Map.bmp

Hagay Mandel

Google maps API V3 has a class that can do the trick.
Check http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView for a complete description.

AXISHK

ASKER

I have seen that but is there any sampel code to see how it acutally works ?

Thanks

SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AXISHK

ASKER

Based on the sample code, any idea how to define the size of the replaced photo and the two position defined in LatLngBounds ?
I have followed the sample and try to put a small photo on my map but the photo couldn't paste into it..

Thanks

var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds( new google.maps.LatLng(40.716216,-74.213393),
new google.maps.LatLng(40.765641,-74.139235));
var myOptions = { zoom: 13, center: newark, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay( "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds);
oldmap.setMap(map);

Hagay Mandel

Same page, under a different section Drawing an Overlay, you'll find the methodology for resizing.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Drawing

ASKER CERTIFIED SOLUTION

AXISHK

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hagay Mandel

Good!

AXISHK

ASKER

Fix the problem. Tks