function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
M.ChanuM.Chanu 

Google Map coming blank

Hi All i have made all the necessary modification to change to Gmap3 but m not google map is Coming Blank

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsa7Q4gy5pzrZzsGkUxhRauOw12gtk9CA&sensor=false"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/jquery-1.4.4.min.js')}"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.GMAP3,'GMAP3/gmap3.js')}"></script>    
    <style>     
      #googleMap{
        border: 1px solid #000;
        width: {!width};
        height: {!height};
Jean-NoelJean-Noel

Can you publish a little bit more of your code related to the page ?
M.ChanuM.Chanu

Hi Joel, here we are using the Jquery  Gmap3 plugins below is my  VF component , VF page and controller to collect all the address details  from the Account object and Class : addressmodel to store the address.

 

<apex:component >
<apex:attribute name="width" type="integer" description="width of the map in pixcel"/>
<apex:attribute name="height" type="integer" description="height of the map in pixcel"/>
<apex:attribute name="addressmodel" type="AddressModel" description="all addresses need to show on map"/>
<apex:attribute name="uselatlng" type="boolean" description="check to see if use lat lng or address"/>
<apex:attribute name="zoom" type="integer" description="zoom level for google map"/>
<apex:attribute name="default" type="string" description="default address where map will be center on load"/>



<!-- new -->
<script type="text/javascript" src="http://maps.googleapis.com/maps?v=3&amp;key=AIzaSyCC-duQoVmJ3aNRarn25yu6VT6u9AMuc9s&sensor=true"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gMap,'../gMap/jquery-1.4.4.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.gMap,'../gMap/gmap3.js')}"></script>
<style>

.sfgmap{
    border: 1px solid #000;

}
</style>
<div id="map" style="width:{!width}px;height:{!height}px;" class="sfgmap"></div>
<script type="text/javascript">
var addresses = new Array();
var defaultaddress = '';
if("{!default}" != ""){
    defaultaddress = "{!default}";
}else{
    defaultaddress = "{!addressmodel.default}";
}
<apex:repeat value="{!addressmodel.addresslist}" var="address">
    var addObject = new Object();
    if("{!uselatlng}" == "false"){
        addObject.address = "{!address.address}";
    }else{
        addObject.latitude = "{!address.lat}";
        addObject.longitude = "{!address.lng}";
    }
    addObject.html = "{!address.info}";
    addresses.push(addObject);
</apex:repeat>
$(function(){
    $("#map").gmap3({
                marker: addresses,
                address: defaultaddress,
                zoom: {!zoom} });
});
</script>
</apex:component>


VF page::

<apex:form >
        
        <apex:pageBlock title="GoogleMap">
        <!--
        <apex:sectionHeader title="sfGMap" subtitle="My Accounts"/>
        -->
        <c:sfGMap width="1000" height="300" addressmodel="{!addressmodel}" zoom="4" uselatlng="false">
        </c:sfGMap>
        </apex:pageBlock>        

        <apex:pageBlock title="Selected Accounts" id="SelectedAccountsId">
            <apex:pageBlockButtons location="top">
                <apex:commandButton value="Back to My GE Accounts" action="{!backToMyGEAccounts}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockTable value="{!accountRes}" 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>DUNS Number</b></apex:facet>
                    {!account.GE_HQ_DUNS_Number__c}
                </apex:column>
                
                <apex:column >
                    <apex:facet name="header"><b>Address</b></apex:facet>
                    {!account.ShippingStreet}, {!account.ShippingCity}, {!account.ShippingCountry}
                </apex:column>
            </apex:pageBlockTable>
            <table width="100%">
                <tr>
                   
                    <td width="200" align="left">
                    <B>
                    <apex:outputText value="Records Per Page:"></apex:outputText>
                    </B>
                    <apex:selectList size="1" value="{!RowsperPage}" onchange="callMyGEAccountMethod();">
                        <apex:selectOptions value="{!RecordsPerPage}" ></apex:selectOptions>
                    </apex:selectList>
                    <apex:actionFunction reRender="SelectedAccountsId" name="callMyGEAccountMethod" action="{!refreshAccounts}" status="Processing">
                    </apex:actionFunction>
                    <apex:actionStatus id="Processing" StartText="   Processing... Please Wait..."/> 

                    </td> 
                    
                    <td width="300" align="left">
                        <B><apex:commandLink value="First Page" rendered="{!isFirst}" action="{!FirstPage}" reRender="SelectedAccountsId"/></B> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <B><apex:commandLink value="<Prev Page" rendered="{!isPrev}" action="{!PrevPage}" reRender="SelectedAccountsId"/></B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <B><apex:commandLink value="Next Page>" rendered="{!isNext}" action="{!NextPage}" reRender="SelectedAccountsId"/></B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <B><apex:commandLink value="Last Page" rendered="{!isLast}" action="{!LastPage}" reRender="SelectedAccountsId"/></B>
                        
                    </td>
                    
                    <td width="100" align="right">
                        <B><apex:outputText rendered="{!totalRecords > 0}">Records {!startRecord}-{!endRecord} of {!totalRecords}</apex:outputText></B>
                    </td>
                    </tr>                  
            </table>
        </apex:pageBlock>
        
        
    </apex:form>   
  
</apex:page>

 
Jean-NoelJean-Noel

Hello,

 

In your code, I can't find the link between the div and script that will display the map. I've done something similar a couple of month ago, I'll try to publish what I've done in a couple of days, I hope it will help you.

 

Regards,

 

Jean-Noel
M.ChanuM.Chanu

Hi Joel can you share your code i think  it will help me understand and modify the missing code

 
Jean-NoelJean-Noel
<apex:page showHeader="false" sidebar="false" standardController="Contact">
    <script src="https://maps.googleapis.com/maps/api/js?Key=MyVerySecretKey&v=3.10&sensor=false"></script>
    <script type="text/javascript">
    var DefaultMarker = new google.maps.LatLng(0, 0);
    var marker;
    var map;
    var geocoder = new google.maps.Geocoder();
      function initialize() {
        
        var mapOptions = {
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: DefaultMarker
        };

        var map = new google.maps.Map(document.getElementById('map2'),
                mapOptions);

        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);
                
        var contentString = "<div style=\"float:left;\"><div style=\"font-family: arial, san-serif; padding-left:30px;\"><span style=\"font-weight:bold;\">{!Contact.Name}</span><br/>{!Contact.MailingStreet}<br/>{!Contact.MailingCity}, {!Contact.MailingState} {!Contact.MailingPostalCode}<br/><br/></div></div>";
            
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        
        geocoder.geocode( { 'address': "{!Contact.MailingStreet}" + ", " + "{!Contact.MailingCity}" + ", " + "{!Contact.MailingState}"+"{!Contact.MailingPostalCode}" + "," + "{!Contact.MailingCountry}"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location, 14);
            marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: results[0].geometry.location,
                title: "{!Contact.Name}"
            });
            google.maps.event.addListener(marker, 'click', function()
            {
                infowindow.open(map,marker);
                if (marker.getAnimation() != null) {
                  marker.setAnimation(null);
                } else {
                  marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        } else {
            geocoder.geocode( { 'address': "{!Contact.MailingPostalCode}" + "," + "{!Contact.MailingCountry}"}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location, 14);
                marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: results[0].geometry.location,
                    title: "{!Contact.Name}"
                });
                google.maps.event.addListener(marker, 'click', function()
                {
                    infowindow.open(map,marker);
                    if (marker.getAnimation() != null) {
                      marker.setAnimation(null);
                    } else {
                      marker.setAnimation(google.maps.Animation.BOUNCE);
                    }
                });
            } else {
        
                //alert("Geocode was not successful for the following reason: " + status);
                marker = new google.maps.Marker({
                  map:map,
                  animation: google.maps.Animation.DROP,
                  position: DefaultMarker,
                  title: 'Default Housing'
                });         
            }
            });
        }
        });

      }
               
        google.maps.event.addDomListener(window, 'load', initialize);
    </script> 
     <style>
html, body, #googft-mapCanvas {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#googft-legend {
  background-color: #fff;
  border: 1px solid #000;
  font-family: Arial, sans-serif;
  font-size: 12px;
  margin: 5px;
  padding: 10px 10px 8px;
}
#googft-legend p {
  font-weight: bold;
  margin-top: 0;
}
#googft-legend div {
  margin-bottom: 5px;
}
.googft-legend-swatch {
  border: 1px solid;
  float: left;
  height: 12px;
  margin-right: 8px;
  width: 20px;
}
.googft-legend-range {
  margin-left: 0;
}
.googft-dot-icon {
  margin-right: 8px;
}
.googft-paddle-icon {
  height: 24px;
  left: -8px;
  margin-right: -8px;
  position: relative;
  vertical-align: middle;
  width: 24px;
}
.googft-legend-source {
  margin-bottom: 0;
  margin-top: 8px;
}
.googft-legend-source a {
  color: #666666;
  font-size: 11px;
}     
        .locationGoogleMap {
            color:#4A4A56;
            font-family:arial,helvetica,sans-serif;
            font-size:12px;
            font-weight:bold;
            left:24.3%;
            position:relative;
        }
        
        #textAddress {
            color:#000000;
            font-family:arial,helvetica,sans-serif;
            font-size:18px;
            height:20px;
            left:40%;
            position:relative;
        }       
    </style>
    
    <apex:outputpanel id="googleMap" layout="none">
        <span id="textAddress"></span>
            <div id="contentMap" style="width: 100%; position:relative; margin-top:10px;"> 
                <div id="map2" style="height: 300px;"></div>
            </div>
    </apex:outputpanel>
</apex:page>

 Better in a code preview
Akhil_7Akhil_7

Thanks..its veryful useful in real time..