Issue with google map API

Question

I have to translate a google map api code from v2 to v3. I've tried but it is not working.

This is the old version code:

function getQueryVariable(variable){
  var query = window.location.search.substring(1);
  var vars=query.split("&");
  for(var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}

    var map = null;
    var geocoder = null;


    function showAddress(address, year1,year2,year3) {
        map = new GMap2(document.getElementById("map_canvas"));
        geocoder = new google.maps.Geocoder();
            if (geocoder) {
               geocoder.getLatLng(address,function(point) {
                        if (!point) {
                           alert(address + " not found");
                           } else {
                             map.setCenter(point, 11);
                             var marker = new GMarker(point);
                             map.addOverlay(marker);

                             }
                          }
                    );
            }
    }

This is what I wrote:

function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(decodeURIComponent(pair[0]) { 
                return pair[1];
            }
        }
    }

var map = null;
var geocoder = null;
function showAddress(address) {
        var map=new google.maps.Map(document.getElementById("map_canvas"));

        geocoder = new google.maps.Geocoder();
        geocoder.geocode(address, function(results, status) {
                           if (status == google.maps.GeocoderStatus.OK) {
                              var center = results[0].geometry.location;
                              map.setCenter(center); 
                              var marker = new google.maps.Marker({
                              map: map,
                              position: center 
                              });
                            } 
                        }
                    }

Someone can tell me what I'm doing wrong?

Thanks a lot.

Marcello

Answer 1

There are syntax errors in your code. But the main issue is you need to initialize the google.maps.Map object. Currently there are 3 required options in the google.maps.MapOptions object:

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

center | LatLng | The initial Map center. Required.
mapTypeId | MapTypeId | The initial Map mapTypeId. Required.
zoom | number | The initial Map zoom level. Required.

This works for me:

function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(decodeURIComponent(pair[0])) { 
                return pair[1];
            }
        }
    }

var map = null;
var geocoder = null;
function showAddress(address) {
  var map=new google.maps.Map(document.getElementById("map_canvas"),{center:new google.maps.LatLng(0,0), zoom:2, mapTypeId : google.maps.MapTypeId.ROADMAP});

  geocoder = new google.maps.Geocoder();
  geocoder.geocode({address:address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var center = results[0].geometry.location;
      map.setCenter(center);
      if (results[0].geometry.viewport) map.fitBounds(results[0].geometry.viewport)
      else if (results[0].geometry.bounds) map.fitBounds(results[0].geometry.bounds)
      var marker = new google.maps.Marker({
                         map: map,
                         position: center 
                         });
    } else alert("Geocoder returns: " + status); 
  });
}

working example