+ Start a Discussion
neeedhelpneeedhelp 

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>

<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: 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();
}
});

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:250px;
background:transparent;
}
</style>

</head>

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

 

 

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

bob_buzzardbob_buzzard

I wouldn't expect your resize iframe function to work, as it is attempting to get at the parent record view page and the browser will disallow that as a cross site scripting attack.  It may be that is the issue - do you see any errors in the javascript console?

mast0rmast0r

Use REQUIRESCRIPT to add a jQuery script to your page:

 

{!REQUIRESCRIPT("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js")}

 

Use "jQuery" instead of $ and load Google Maps API script only if the page is loaded and use HTTPS:

 

function loadGoogleScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src="https://maps.google.com/maps/api/js?sensor=false";
    document.body.appendChild(script);
}

jQuery(document).ready(function() { 
// Init the Google API
loadGoogleScript();
});
neeedhelpneeedhelp

IF you don't mind Bob I'm new to javascript and allthe stuff.........Can u tell where this javascript console can be?

mast0rmast0r

In your browser:

Firefox: Ctrl + Shift + K

Chrome: Ctrl + Shift + J

neeedhelpneeedhelp

I just copied and pasted the code from this http://forceguru.blogspot.in/2012/01/integrating-google-maps-in-salesforce.html

 

  dnt have any idea of javascript and all.....Can u xplain me briefly what I want to do

mast0rmast0r

Sorry man, i think you need a developer...

neeedhelpneeedhelp

just give me the code pls....What shld I do so that I can know my mistake

reddygari403reddygari403
  1. <apex:page standardController="Account" showHeader="ff" sidebar="false">
    <apex:form >
    <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: 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();
    }
    });

    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:250px;
    background:transparent;
    }
    </style>

    </head>

    <body>
    <div id="map"></div>
    </body>
    <apex:pageBlock >
    <apex:pageBlockButtons >
    <apex:commandButton value="" action="{!}"/>
    </apex:pageBlockButtons>
    <apex:pageBlockSection >
    <apex:inputField value="{!Account.name}"/>
    </apex:pageBlockSection>


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

     

    class:

    =========

Arun KArun K

try updating from http to https 

 

May be this resolves ur problem

 

Harshad Kokate 13Harshad Kokate 13
Its Giving me an error like dis:XML document structures must start and end within the same entity.
at Last Line