Question

我从：

逐行跟踪示例代码

How do I integrate Salesforce with Google Maps?

我没有收到任何错误，但我的地图是空白的。地图显示缩放和位置切换，但没有其他内容。

关于为什么的任何想法？

这是我的控制器代码和页面代码

 public class mapController2 {
    public String address {get;set;}
    private List<Account> accounts;

    public void find() {
        // Normal, ugly query.
       /* address = 'USA';
        String addr = '%' + address + '%';
        accounts = [SELECT Id, Name, BillingStreet, BillingCity, BillingCountry FROM Account 
        //WHERE Name LIKE :addr OR BillingStreet LIKE :addr OR BillingCity LIKE :addr OR BillingCountry LIKE :addr];
        WHERE BillingCountry LIKE :addr];*/

       // address = 'Austin';
        String addr = '*' + address + '*';
        // Or maybe a bit better full-text search query.
        List<List<SObject>> searchList = [FIND :addr IN ALL FIELDS RETURNING 
            Account (Id, Name, BillingStreet, BillingCity, BillingState, BillingCountry)];
        accounts = (List<Account>)searchList[0];
    }

    public List<Account> getAccounts() {
        return accounts;
    }
}

网页代码

<apex:page controller="mapController2" tabStyle="Account">
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
#map {
  height:350px;
}
</style>
</head>
<apex:form >
    <apex:pageBlock title="Search by Address">
        <apex:inputText value="{!address}"/>
        <apex:commandButton value="Search" action="{!find}"/>
        <p>Examples: "USA", "Singapore", "Uni", "(336) 222-7000". 
           Any text data (free text, not picklists, checkboxes etc.) will do.
        </p>
    </apex:pageBlock>
    <apex:pageBlock title="Matching Accounts" rendered="{!address != null}">
        <apex:pageBlockTable value="{!accounts}" var="account" id="accountTable">
            <apex:column >
                <apex:facet name="header"><b>Name</b></apex:facet>
                <apex:outputLink value="../{!account.Id}">{!account.Name}</apex:outputLink>
            </apex:column>
            <apex:column >
                <apex:facet name="header"><b>Address</b></apex:facet>
                {!account.BillingStreet}, {!account.BillingCity}, {!account.BillingCountry}
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>

    <apex:pageBlock title="Map" rendered="{!address != null}">
        <div id="log"></div>
        <p>Tip: hover mouse over marker to see the Account name. Click to show the baloon.</p>
        <div id="map">Placeholder - map will be created here.</div>
        <script type="text/javascript">
// First we need to extract Account data (name and address) from HTML into JavaScript variables.
var names = new Array();
var addresses = new Array();

var htmlTable = document.getElementById('j_id0:j_id2:j_id7:accountTable').getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < htmlTable.length; ++i) {
    names.push(htmlTable[i].getElementsByTagName("td")[0]);

    // We need to sanitize addresses a bit (remove newlines and extra spaces).
    var address = htmlTable[i].getElementsByTagName("td")[1].innerHTML;
    addresses.push(address.replace(/\n/g, "").replace(/^\s+/,"").replace(/\s+$/,""));
}

var coordinates = new Array();    // Array of latitude/longitude coordinates.
var markers = new Array();        // Red things we pin to the map.
var baloons = new Array();        // Comic-like baloons that can float over markers.
var counter = 0;

var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN
    }
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

if(addresses.length > 0) {
    geocodeOneAddress();
}

function geocodeOneAddress(){
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: addresses[counter]}, processGeocodingResults);
}

function processGeocodingResults(results, status) {
    ++counter;
    if (status == google.maps.GeocoderStatus.OK) {
        coordinates.push(results[0].geometry.location);
    } else {
        logError(addresses[counter] + " could not be found, reason: " + status);
    }

    if(counter == addresses.length) {
        finalizeDrawingMap();
    } else {
        geocodeOneAddress();
    }
}

function finalizeDrawingMap() {
    // Compute min/max latitude and longitude so we know where is the best place to center map & zoom.
    var minLat = coordinates[0].b;
    var maxLat = coordinates[0].b;
    var minLong = coordinates[0].c;
    var maxLong = coordinates[0].c;

    for(i=0;i < coordinates.length; i++){
        markers.push(new google.maps.Marker({ position: coordinates[i], map: map, title: names[i].getElementsByTagName("a")[0].innerHTML, zIndex:i}));
        baloons.push(new google.maps.InfoWindow({content: '<b>'+names[i].innerHTML + '</b><br/>' + addresses[i]}));

        google.maps.event.addListener(markers[i], 'click', function() {
            baloons[this.zIndex].open(map,this);
        });

        minLat = Math.min(minLat, coordinates[i].b);
        maxLat = Math.max(maxLat, coordinates[i].b);
        minLong = Math.min(minLong, coordinates[i].c);
        maxLong = Math.max(maxLong, coordinates[i].c);
    }
    map.setCenter(new google.maps.LatLng(minLat + (maxLat-minLat) / 2, minLong + (maxLong-minLong) / 2));

    // All that is left is to possibly change the zoom. Let us compute the size of our rectangle.
    // This is just a rough indication calculation of size of rectangle that covers all addresses.
    var size = (maxLat-minLat) * (maxLong-minLong);
    var zoom = 13;

    if(size > 7100) {
        zoom = 2;
    }
    else if(size > 6000) {
        zoom = 3;
    }
    else if(size > 550) {
        zoom = 4;
    }
    else if(size > 20) {
        zoom = 6;
    }
    else if(size > 0.12) {
        zoom = 9;
    }
    map.setZoom(zoom);
}

function logError(msg) {
    var pTag = document.createElement("p");
    pTag.innerHTML = msg;
    document.getElementById('log').appendChild(pTag);
}
        </script>
    </apex:pageBlock>
</apex:form>
</apex:page>

Answer 1

雅甚至我得到了一张空白地图，但试着去做

https://c.na3.visual.force.com/apex/map?id=0015000000UsQZR

确保输入有效的帐户ID。

<apex:page standardController="Account">

<script src="http://maps.google.com/maps?file=api">
</script>

<script type="text/javascript">

var map = null;
var geocoder = null;

var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

function initialize() {
if(GBrowserIsCompatible())
{
  map = new GMap2(document.getElementById("MyMap"));
  map.addControl(new GMapTypeControl());
  map.addControl(new GLargeMapControl3D());

  geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        document.getElementById("MyMap").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.bindInfoWindowHtml("Account Name : <b><i> {!Account.Name} </i></b> 
 Address : "+address);
      }
    }
  );
}
}
</script>


<div id="MyMap" style="width:100%;height:300px"></div>
<script>
    initialize() ;
</script>

</apex:page>

希望这有帮助

由于大将并使用以下代码：

Answer 2

SRC = “http://maps.google.com/maps/api/js?sensor=false”

使用

HTTPS

不是

HTTP

如果使用http而不是https，它在firefox或chrome中肯定是空白的。试试https。

与Salesforce集成的Google Map是空白的

2 个答案: