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
LuckyOneLuckyOne 

I am a Newbie:) just want know how to showing up a google maps in custom object

Hi,
I am already have right code to get goole map from the custom object when street, surbub, city and country all fill in.
So, my question is:
if this custom object have another field which is called geolocation (latitude, longtitude).

How can I get map from geolocation first, if geolocation is empty or have errors, then run my code(showing below) to get map from those field( street, surbub, city and country)

could you give me another part of code which is getting map from geolocation:)

Thanks, 
<apex:page standardController="Location__c">

<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: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Location__c.Street__c} {!Location__c.city__c} {!Location__c.Suburb__c} {!Location__c.Country__c}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Location__c.Name}</b><br>" + address + " "
  });

  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: "{Location__c.Name__c}"
        });

        //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! 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;
  //min-width:300px;
  background:transparent;
}
</style>

</head>

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

 
LuckyOneLuckyOne
Anybody can answer my question>??? so appreciate:)
LuckyOneLuckyOne
Please, please............Thanks guys
Vasani ParthVasani Parth
LuckyOne,

Welcome to this vibrant Salesforce developer community.

Try changing this for https:, you may remove "https" (or) "http", <script> tag can switch between either depending on the server that you open the URL from. salesforce will open in "https:" by default.

 
Vivek DVivek D
Use Angular Map 
http://angular-js.in/ng-map/
  
// GET the lat long 
// In the angular controller if your are using on detail page for a object
$scope.lat = '{!Account.Location_Lattitude__s};
$scope.lng = '{!Account.Location_Longitude__s};'


<ng-map center="{{lat}},{{lng}}" zoom="15" ng-style="style()" resize="resize">
     <marker position="{{lat}},{{lng}}" title="My Location" ></marker>
</ng-map>

 
LuckyOneLuckyOne
@Vivek D

Hi, I cannot use Angular, because of the requirment.
so, do you have any other way? or just follow my code, what can we do on it ?

Thanks,    anybody>??????  
if  it works, I will set the answer as the best one Immidiately:)

Thanks
LuckyOneLuckyOne
Hi guys,
If it works, I will set the answer as the best one Immidiately:)

Thanks
Rakesh Kumar SainiRakesh Kumar Saini

Hi

Use below code without Angular JS

var latlng = new google.maps.LatLng("{!Account.Location__latitude__s}","{!Account.Location__Longitude__s}");

geocoder.geocode( {'location': latlng}, function(results, status) {
.
.
.

}