Salesforce Developer Community

Harshad Kokate 13
NEWBIE
15 Points
Member since 2014

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
2

Questions
3

Replies

I want to autoupdate the country and state from Pincode using third party apiI have an object named Customer Info

I want to autoupdate the country and state from Pincode using third party apiI have an object named Customer Info
I which fields are : *Name *Address *city *State *Country *zip Code
And In detail side of customer record :with refrence of address details (address, city, zip code)given above . the location get trace and shown in google maps

what i want to do is : if i keep state and country blank and inserted zip code and city on basis of this country and state shoul get auto populated
how could i do this??

I have vf page snippet as follows

<apex:page standardController="Customer_Information__c">
    <apex:pageBlock >
        <head>

            <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script type="text/javascript">

            $(document).ready(function() {

                var myOptions = {
                    zoom: 20,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    mapTypeControl: true
                }

                var map;
                var marker;

                var geocoder = new google.maps.Geocoder();
                var address = "{!Customer_Information__c.Address_Line__c}, " + "{!Customer_Information__c.City__c}, ";

                var infowindow = new google.maps.InfoWindow({
                content: "<b>{!Customer_Information__c.Name}</b>"
                });

                geocoder.geocode( { address: address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK && results.length) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

                            //create map
                            map = new google.maps.Map(document.getElementById("map"), myOptions);

                            //center map
                            map.setCenter(results[0].geometry.location);

                            //create marker
                            marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: "{!Customer_Information__c.Name}"
                            });

                            //add listeners
                            google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);
                            });

                            google.maps.event.addListener(infowindow, 'closeclick', function() {
                            map.setCenter(marker.getPosition());
                            });

                        }

                    } else {

                        $('#map').css({'height' : '15px'});
                        $('#map').html("Oops! {!Customer_Information__c.Name}'s address could not be found, please make sure the address is correct.");
                        resizeIframe();
                    }
                });

                function resizeIframe() {
                    var me = window.name;
                    if (me) {
                        var iframes = parent.document.getElementsByName(me);
                        if (iframes && iframes.length == 1) {
                            height = document.body.offsetHeight;
                            iframes[0].style.height = height + "px";
                        }
                    }
                }

            });

            </script>

            <style>
                #map {
                    font-family: Arial;
                    font-size:12px;
                    line-height:normal !important;
                    height:500px;
                    background:transparent;
                }
            </style>

        </head>

        <body>
            <div id="map"></div>
        </body>

    </apex:pageBlock>
</apex:page>

it shows above output

Harshad Kokate 13
December 08, 2014
Like
0

SOLVED

3 replies

I need To show google maps into the vf page in which it auto matically detects yhe country and state by detecting clients adress city and pincode It should also shows customer location

I have written the following code Kindly help me in this

<apex:page>
<apex:page standardController="Customer_Information__c">
<apex:pageBlock >
<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var myOptions = {
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Customer_Information__c.Address_Line__c}, " + "{!Customer_Information__c.City__c}, ";

var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Customer_Information__c.Name}</b>"
});

geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);

        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Customer_Information__c.Name}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition());
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Customer_Information__c.Name}'s address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
});

function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
}

});
</script>

<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>

</head>

<body>
<div id="map"></div>
</body>
</apex:pageBlock>
</apex:page>

Harshad Kokate 13
December 07, 2014
Like
0

SOLVED

3 replies

I need To show google maps into the vf page in which it auto matically detects yhe country and state by detecting clients adress city and pincode It should also shows customer location

Harshad Kokate 13
December 07, 2014
Like
0

10 replies

Google map not displaying in VF page

HI their,

I can't see the google map in VF page when I copy and paste the code here is my code......Dnt knw y?help pls

<apex:page standardController="Account">

<head>

$(document).ready(function() {

var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}

var map;
var marker;

var geocoder = new google.maps.Geocoder();
var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
});

geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);

//center map
map.setCenter(results[0].geometry.location);

//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name}"
});

//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});

}

} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");
resizeIframe();
}
});

});
</script>

</head>

I have edited the layout of Account by Visualforce page also....

neeedhelp
August 30, 2012
Like
0