+ Start a Discussion
jhansisridhar_2011jhansisridhar_2011 

To display multiple Pinpoints in google Maps

Hi All,

 

I need help in google Maps.

I have a app , to display multiple pinpoints, wherever sales person present with thier longitute and latitude.

Below is my code snippet:

<apex:page standardController="xyz__c" extensions="xyz_gmaps" action="{!value}">



<script src="/soap/ajax/23.0/connection.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places" type="text/javascript"></script>
<script  type="text/javascript">
 

function initPage(){
    if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(
         
            function (position) {  
    
            mapThisGoogle(position);
     
            },
           
       
            );
        }
        
    }

function mapThisGoogle(position)
{
    <!-- In position we will get i-pod location of Sales Rep  -->
    var mapCenter = new GLatLng(position.coords.latitude,position.coords.longitude);
    <!-- we can get latitude and longitude of Sales Rep position and save when status is completed -->
    alert(position.coords.latitude+'gmap'+position.coords.longitude);
    var geocoder = new GClientGeocoder();        
    map = new GMap2(document.getElementById("j_id0:j_id2:j_id3:map_canvas"));
    map.setCenter(mapCenter, 13);  
    map.addOverlay(new GMarker(mapCenter));
     
    <!-- This is for physician visit location address dynamically from contact in which if their is mailing address means it will display else other address will display -->
        geocoder.getLatLng("Akota rd,vadodara", function(point) {
       if (!point) {
            alert(place + " not found");
        } else {
        
         <!--add Zoom Control, Map Type control -->
            map.addControl(new GSmallZoomControl());
            map.addControl(new GScaleControl());
            
            <!--add custome Blue Marker -->
            var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
            var marker = new GMarker(point, {icon: newIcon});
         
            map.addOverlay(marker);
            alert(point.y +' map1'+ point.x);
            }
            <!--  Here code for distance calculation --->
            var radlat1 = Math.PI * position.coords.latitude/180; <!---- Here  Math.PI = 3.141592653589793 -->
            var radlat2 = Math.PI * point.y/180;
            var radlon1 = Math.PI * position.coords.longitude/180;
            var radlon2 = Math.PI *  point.x/180;
            var theta =  position.coords.longitude- point.x;
            var radtheta = Math.PI * theta/180;
            var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
            dist = Math.acos(dist);
            dist = dist * 180/Math.PI;
            dist = dist * 60 * 1.1515;
            dist = dist * 1.609344;
            
            alert(dist);
       })
         
}
window.onload = initPage;

</script>   
  <c:GoogleMapsInternational iconColour="#BF8C9F"
      address="{!Street},{!City},{!state},{!country} "/>
   
</apex:page>

 

am able to run gmaps with place, but I could not able to disply 2 pinpoint in gmaps, Is anything missing in coding .Could any one help me .

 

Advance Thanks.