Thursday, July 28, 2011

Google Map into Your Site

<script type="text/javascript">
                            
  // This loads the map, it is mandatory.
  function initialize() {
    var myLatlng = new google.maps.LatLng(21.013321,75.563972); 
//Change the LatLng to your location.
    var myOptions = {
      zoom: 17, // Any number 1-20 will work here.
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    // This adds a marker, it is optional.
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map
      });
      
      // This adds an information bubble to your marker. It too is optional.
      // You can change the text and style below, just be careful to follow the 
      // formatting, using double quotes only in your HTML, enclosing each line 
      // in single quotes, and ending the entire string with a semi-colon.
      var contentString = '<p style="height: 80px; width: 200px; margin: 0; padding: 0">' +
          '<strong>ALT address</strong><br />' +
          '850 S. Main St. <br /> Jalgaon<br />' +
          '<a href="http://maps.google.co.in/maps?hl=en&tab=wl" rel="external">Get Directions</a></p>';
      
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
     // This opens the information bubble automatically when the page loads.
     // This is optional.
     infowindow.open(map,marker);        
  }
  
        
  // This calls Google Maps into play.  It is mandatory.
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }
  window.onload = loadScript;
</script>

<!-- The code below is the size of your map -->
<div id="map_canvas" style="height: 500px; width: 500px;"></div>

No comments:

Post a Comment