Link to home
Create AccountLog in
Avatar of AXISHK
AXISHK

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
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

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.
Avatar of AXISHK
AXISHK

ASKER

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

Thanks
SOLUTION
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of 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);
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
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of AXISHK

ASKER

Fix the problem. Tks