Issues With my VF Google Map Page

Question

I have a VF page, integrating with Google Map. I have to load the Google Map with Washington DC. Also need to display a list of Person Accounts coming from my controller(after some search operation). Now, VF page coming as blank page. Since I am not that good in JS, pls let me know, where I have done the mistake with my code.

Note : Controller code & VF page(I used apex:map tag for Google Map)was working fine.In order to position zoom controller in the Google Map, I had to convert the map code to JS. I just added the below 3 lines in controller and created a new VF page for the Map. Thanks much in Advance.

Reshmi.

Controller Code :

  public String addressList {get;set;}
  lstAccount = Database.query(strQuery);
  addressList = String.escapeSingleQuotes(JSON.serialize(lstAccount));

VF Page :

 <apex:page controller="extSearchPersonAccountRecords" docType="HTML-5.0" sidebar="false">


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>  
  var map,geocoder,infowindow;  
  $j = jQuery.noConflict();   
  $j(document).ready(function(){  
    initMap();  
  }); 
var locationlist = [['Washington','41.287471','-99.3817052']]
function initMap(){       
    var geocoder= new google.maps.Geocoder();
    var Options={
    zoom:12,
    mapTypeControl: true,
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
    }  
    };
    map = new google.maps.Map($j('#map')[0], Options); 
    codeAddress()
}

  //============================= CODING ADDRESS ================================================
  function codeAddress(){  
      var accountList = JSON.parse('{!addressList}');
      for(var i=0;i<accountList.length;i++){
           locationlist.push([accountList[i].Name,accountList[i].PersonMailingLatitude, accountList[i].PersonMailingLongitude]);
           alert(locationlist[i]); 
           geocoder.geocode( {'address': locationlist[i]}, function(results, status) {  
              if (status == google.maps.GeocoderStatus.OK) {  
                    var location = locationlist[i].geometry.location;  
                    var marker=addMarker(location);  
                    attachInfoWindow(marker,locationlist[i]);  
                  }  
                  else {  
                    alert(status); }  
                }); 
            }  
          }  
 //================================== ADDING MARKER ========================

  function addMarker(location) {  
   marker = new google.maps.Marker({  
       position: location,  
       map: map  
     });  
     //set the bounds and initial zoom  
       var latlngbounds = new google.maps.LatLngBounds();  
       latlngbounds.extend(marker.getPosition());  
       map.fitBounds(latlngbounds);  
       map.setZoom(14);  
       return marker;  
      }  

 //============= MARKING WINDOW =====================

 function attachInfoWindow(marker,address){  
    google.maps.event.addListener(marker, 'click', function() {  
      if(infowindow!=null)  
       {  
         infowindow.close();  
       }  
     var contentString = '<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Address</div>'  
         +'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">'+address.formatted_address+'</div>';  
     infowindow = new google.maps.InfoWindow({  
       content: contentString  
     });  
      infowindow.open(map,marker);  
    });  
  }  
 </script>  
<!----------------------------- SCript ends----->   
 <style>  
  #map {  
   width:100%;  
   height:917px;   
  }  
</style>  
<div id="map" class="ui-widget-content ui-corner-all ui-state-default">   </div>  
 </apex:page>

Answer 1

One problem is that by including var on this line:

var geocoder= new google.maps.Geocoder();

the variable is local to the function, but you need instead to assign the Geocoder reference to the var defined at the beginning of the script so instead use:

geocoder = new google.maps.Geocoder();

Your browser has a full JavaScript debugger in which you can set breakpoints and examine values so if you are going to write very much JavaScript learn how to use that. There is also a console that you can just output values into using console.log.

When you are stuck, another approach is to cut and paste the JavaScript into http://jshint.com/. You will typically get "undefined variables" but may also get information that points to the real problem.

Use your browser's "Inspect Element" or "View Source" to see the HTML that is output. Then I think you will find that changing to this helps too:

var accountList = {!addressList};

Answer 2

Well, few things I wanted to point out.

When things which can be done using simple JavaScript, avoid going for jQuery. You are using jQuery in your code but haven't imported the jQuery library. Add the following line after tag.

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Your event listener using jQuery is not firing(I don't know why) but if you change it to this, it works.

$( document ).ready(function() {
        //console.log( "document loaded" );
        initMap();
    });

Next, you haven't set the center of the map, so the map doesn't know where to center when its loaded. Add a LatLng object as center of your map in initMap function.

function initMap(){
var latlng = new google.maps.LatLng(-34.397, 150.644);  //define your fav location.     
    var geocoder= new google.maps.Geocoder();
    var Options={
    zoom:12,
    center: latlng, //add the center.
    mapTypeControl: true,
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
    }  
    };
    map = new google.maps.Map($('#map')[0], Options);  //notice, its $ not j$.
    codeAddress(); //you missed a semicolon here.
}

Now you will see a map atleast. Enjoy!