www.webdeveloper.com
Results 1 to 2 of 2

Thread: Google map

  1. #1
    Join Date
    Jun 2011
    Posts
    141

    Google map

    I am trying to insert a google map on to my page.
    Googles API tutorial gives an example which is as follows:
    Code:
    <!DOCTYPE html> 
    <html>   
    <head>     
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />     
    <style type="text/css">       
    html { height: 100% }       
    body { height: 100%; margin: 0; padding: 0 }       
    #map_canvas { height: 100% }     
    </style>     
    <script type="text/javascript"       
    src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">     
    </script>     
    <script type="text/javascript">       
    function initialize() {         
    var myOptions = {           
    center: new google.maps.LatLng(-34.397, 150.644),           
    zoom: 8,           
    mapTypeId: google.maps.MapTypeId.ROADMAP         
    };         
    var map = new google.maps.Map(document.getElementById("map_canvas"),             
    myOptions);       
    }     
    </script>   
    </head>   
    <body onload="initialize()">     
    <div id="map_canvas" style="width:100%; height:100%"></div>   
    </body> 
    </html>
    Because my header is a seperate file using an include, I didnt want the javascript stuff being loaded on every page so I have this within my main body:

    Code:
    <script type="text/javascript">
          src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
    </script>
    
    <script type="text/javascript">       
    function initialize() {         
    	var myOptions = {           
    		center: new google.maps.LatLng(53.786807, -2.504883),           
    		zoom: 8,           
    			mapTypeId: google.maps.MapTypeId.ROADMAP         
    			};         
    		
    		var map = 
    		new google.maps.Map(document.getElementById("map_canvas"),             
    			myOptions);       
    		}     
    		</script>
    I have this where I want the map to display:

    Code:
    <div id="map_canvas" style="width:200px; height:200px"></div>
    And finally, because my <body> is within the header file, I have put the onload on an image tag:
    Code:
    <a href="#"><img onload="initialize()" src="images/buyers.gif"/></a>
    For some reason, this doesn't work, any advice?

    Thanks.

  2. #2
    Join Date
    Jun 2011
    Posts
    141
    OK, fixed this so please ignore topic, was the most stupid thing ever, see if you can spot the extra >

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles