19Mar/133

Dynamicly load Google Maps v3

Quite often pages are overloaded with 3rd party APIs or widgets and page loading time becomes a bottleneck in user experience. In my project I need google maps support, but only if user selects one particular tab.

So how to load Google Maps V3 dynamicly, on button click or tab select

Main steps here are load maps API, wait for load, create map and wait for tiles to load.

Load maps API

First step is to load javascript API. One important thing here is callback parameter. That function will be executed after API is fully loaded.

$.ajax({
   url: "http://maps.googleapis.com/maps/api/js?sensor=false&callback=MapApiLoaded",
   dataType: "script",
   timeout:8000,
   error: function() {
      // Handle error here
   }
});

Create map object and wait for full load

Next, define function MapApiLoaded, good place to create map object and setup.

function MapApiLoaded() {
   // Create google map
   map = new google.maps.Map($('#gmap')[0], {
      zoom:8,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      panControl:false,
      streetViewControl:false,
      mapTypeControl:true
   });
   map.setCenter(new google.maps.LatLng(-1.950106, 29.873887999999965));
 
   // Add marker
 
   // Trigger resize to correctly display the map
   google.maps.event.trigger(map, "resize");
 
   // Map loaded trigger
   google.maps.event.addListenerOnce(map, 'idle', function () {
      // Fire when map tiles are completly loaded
   });
}
Did you find this post useful? Support the the author ($10)
My Google Profile+
Comments (3) Trackbacks (0)
  1. Thank you!

  2. can you show working demo?

  3. please can you help me convert this .js file to show google map instead of google earth.

    below is the code

    var ge;
    var placemarks=new Array;
    google.load(“earth”, “1”, {“other_params”:”sensor=false”});
    google.setOnLoadCallback(init);
    function init() {
    google.earth.createInstance(mattrack_map, initCB, failureCB);
    }

    function initCB(instance) {
    /*var href = ‘http://mattrack.net/images/Barrow_Island_LNG_Plant.kmz';
    ge = instance;
    google.earth.fetchKml(ge, href, function(kmlObject) {
    if (kmlObject)
    ge.getFeatures().appendChild(kmlObject);
    });
    */
    //google.earth.createInstance(mattrack_map, initCB, failureCB);
    //alert(‘nearly’);
    ge = instance;
    ge.getWindow().setVisibility(true);
    //add barrow overlay
    /*var link = ge.createLink(”);
    var s_code=$(“#copyright”).attr(‘data-sit’);
    //var href = ‘C:/xampp/htdocs/matTrack/images/Barrow_Island_LNG_Plant.kmz';
    var href = ‘http://mattrack.net/images/’+s_code+’.kmz';
    link.setHref(href);
    var networkLink = ge.createNetworkLink(”);
    networkLink.set(link, true, true); // Sets the link, refreshVisibility, and flyToView
    ge.getFeatures().appendChild(networkLink);
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
    */
    }

    function failureCB(errorCode) {
    gizmo_prompt(“Google Earth”,”An error ocurred during the map load Press F5 to re-load “+errorCode)
    }
    function add_placemark(id,a_name,a_date,a_lat,a_long,a_type,m_errors){
    var icon = ge.createIcon(”);
    //icon.setHref(‘http://maps.google.com/mapfiles/kml/paddle/placemark_circle.png’);
    if (m_errors>0){
    icon.setHref(‘http://mattrack.net/images/placemark_skull2.png’);
    } else if (a_type==’D’){
    icon.setHref(‘http://mattrack.net/images/cable_drum.png’);
    } else if (a_type==’M’) {
    icon.setHref(‘http://mattrack.net/images/material.png’);
    } else if (a_type==’W’) {
    icon.setHref(‘http://mattrack.net/images/crow.png’);
    } else if (a_type==’A’) {
    icon.setHref(‘http://mattrack.net/images/container.png’);
    } else if (a_type==’P’) {
    icon.setHref(‘http://mattrack.net/images/pressure.png’);
    } else {
    icon.setHref(‘http://mattrack.net/images/placemark_circle.png’);
    }
    var style = ge.createStyle(”); //create a new style
    style.getIconStyle().setIcon(icon); //apply the icon to the style
    //style.getIconStyle().setScale(5.0);
    try {
    var placemark = ge.createPlacemark(id);
    placemark.setStyleSelector(style);
    placemark.setName(a_name);
    placemark.setDescription(a_date);
    // Set the placemark’s location.
    var point = ge.createPoint(”);
    point.setLatitude(a_lat);
    point.setLongitude(a_long);
    placemark.setGeometry(point);

    // Add the placemark to Earth.
    ge.getFeatures().appendChild(placemark);
    placemarks.push(placemark);
    } catch(err){
    alert(‘Error adding material to map id ‘+id+’ a_name ‘+a_name+’ a_date ‘+a_date+’ a_lat ‘+a_lat+’ a_long ‘+a_long+’ ‘+err);
    }
    }
    function remove_placemarks(){
    for(var i = 0; i<placemarks.length; i++){
    //alert('removing placemark '+placemarks[i].getId());
    ge.getFeatures().removeChild(placemarks[i]);
    //$("#"+placemarks[i].getId()).remove();
    }
    ge.setBalloon(null);
    }
    function change_view(lat,long,range){
    var lookAt = ge.createLookAt('');
    lookAt.setLatitude(lat);//center of all the points
    lookAt.setLongitude(long);
    lookAt.setRange(range); //default is 0.0
    ge.getView().setAbstractView(lookAt);
    }


Leave a comment

No trackbacks yet.