+ Start a Discussion

Why I received error when try integrate the google map into vf page and then use it in salesforce Task


I have made my code for the vf page to be this way:

<apex:page standardController="Task">  
   <!-- This will import Necessary Jquery js File and StyleSheets, maybe I should declare the website to another 3rd party API instead of google map-->  
   <apex:includeScript value="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMX_jQIEOUZKyrthQdQwRPZA-e1hXlGGE&sensor=false"/>  
   <apex:includeScript value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'js/jquery-1.6.2.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'js/jquery-ui-1.8.16.custom.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jqPlugin, '/jquery.blockUI.js')}"/>  
   <apex:stylesheet value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>  
      var map,geocoder,infowindow;  
      var latLngs = [];  
      $j = jQuery.noConflict();   
      function initialize() {  
       geocoder = new google.maps.Geocoder();  
       //initial cordinates for map init based on Tokyo 
       var latlng = new google.maps.LatLng(35.6895, 139.6917);  
       var myOptions = {  
         zoom: 4,  
         center: latlng,  
         mapTypeId: google.maps.MapTypeId.ROADMAP  
       //This will load the map and print information
       map = new google.maps.Map($j('#map')[0], myOptions);  
      /*This function codes the address using the Billing Address in the Acoount*/  
      function codeAddress(){  
        //prepare a string for geocoding  
          var address = '{!Task.Site_Street__c},{!Task.Site_City__c},{!Task.Site_State__c},{!Task.Site_Zip__c}';  
        //geocode the address  
        geocoder.geocode( { 'address': address }, function(results, status) {  
          //if it is a success  
          if (status == google.maps.GeocoderStatus.OK) {  
            var location = results[0].geometry.location;  
            var marker=addMarker(location );  
            //attach info window to the marker  
          else {  
      *This method adds a marker to the provided location  
      function addMarker(location) {  
       marker = new google.maps.Marker({  
           position: location,  
           map: map  
         //set the bounds and initial zoom  
       var latlngbounds = new google.maps.LatLngBounds();  
       return marker;  
     //this function shows the address of a marker when it is clicked  
     function attachInfoWindow(marker,address){  
        google.maps.event.addListener(marker, 'click', function() {  
         //HTML formated string that is used to dispaly info window over the map markers currently showing the formated address  
         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  
     #map {  
   <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>  

However, I received an error such as 



I do not know why it doesnt take the address in the task whenever I already specified the everything from address, city, state and zipcode. Please someone help me. 

Deepali KulshresthaDeepali Kulshrestha
Hi SalesforceLearnerNewbie,

I went through the query of yours and found some posts related to the kind of the same problem. Please refer to the following links as they may be helpful in solving your problem:


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha