Google Map - Creat a map

Google Map

---o0o---

Original link

I. Creates a Google Map - when the page is loaded

1. Call API

<script src="http://maps.googleapis.com/maps/api/js"></script>
        

2. Init js function to set map properties

<script>
    function initialize() {
        var mapProp = {
            center:new google.maps.LatLng(51.508742,-0.120850),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
        

3. Creat div to contain the map

<div id="googleMap" style="width:500px;height:200px;"<>/div>
        

• initialize : Init function
• mapProp: Creat an object to define the properties for the map
• google.maps.Map: Creat new map object which have the mapProp properties
• google.maps.event.addDomListener: Add an event listener to execute the initialize() function when the page is loaded

I. Creates a Google Map - after the page is loaded

1. Creat js function

 <script>
     function init()
     {
         var mapProp = {
             center: new google.maps.LatLng(51.508742,-0.120850),
             zoom:7,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map(document.getElementById("googleMap1"),mapProp);
     }

     function loadScript()
     {
         var script = document.createElement("script");
         script.type = "text/javascript";
         script.src = "http://maps.googleapis.com/maps/api/js?callback=init";
         document.body.appendChild(script);
     }
     window.onload = loadScript;
 </script>
        

• The loadScript() function creates the Google Maps API <script> tag
• callback=init: this parameter to execute init() function after the API is fully loaded
• window.onload: load the Google Maps API after the page has fully loaded