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
Kalle KalifKalle Kalif 

Google maps, multiple markers, AJAX toolkit

I am trying to plot multiple markers in google maps, getting the data in an array through ajax toolkit. I am preeeetty sure i am making a mistake in handling the results from my soql query. 

 

Can one of you experts tell me what i am doing wrong?

 

<apex:page >
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/soap/ajax/23.0/connection.js" type="text/javascript" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
        
$(document).ready(function() {


        sforce.connection.sessionId = '{!$Api.Session_ID}';

        // Query data using SOQL.
var records = sforce.connection.query("Select latdecimal__c, londecimal__c from daily__c where vehicle_name__c='a0DM0000000YgEK' order by report_date__c limit 2");
locations = records.getArray("locations");

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker;
    var i;
       
for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });
  
    //add listeners
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
            }
          })(marker,i));
     };
        

  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>

 

Best Answer chosen by Admin (Salesforce Developers) 
Kalle KalifKalle Kalif

As a matter of fact I did. It now works beautifully!

 

The problem was that I did not know how to correctly retrieve data from the array of data. 

 

The above 

locations = records.getArray("locations");

 should be

locations = records.getArray("records");

 

 

And the everywhere I use the [locations] I needed to be more specific. 

 

The above

position: new google.maps.LatLng(locations[i][0], locations[i][1]),

 should be

position: new google.maps.LatLng(locations[i].Daily_Reports__r.records.LatDecimal__c, locations[i].Daily_Reports__r.records.LonDecimal__c),

 

It is most easy to see what notation to use when navigating the locations array here by debugging it and looking at the list in the debug window that appears when you run the page.

sforce.debug.log(locations);

 

As far as i remember that is all modification needed of the above to make it work!

All Answers

Red2678Red2678

Did you ever get this working?
Kalle KalifKalle Kalif

As a matter of fact I did. It now works beautifully!

 

The problem was that I did not know how to correctly retrieve data from the array of data. 

 

The above 

locations = records.getArray("locations");

 should be

locations = records.getArray("records");

 

 

And the everywhere I use the [locations] I needed to be more specific. 

 

The above

position: new google.maps.LatLng(locations[i][0], locations[i][1]),

 should be

position: new google.maps.LatLng(locations[i].Daily_Reports__r.records.LatDecimal__c, locations[i].Daily_Reports__r.records.LonDecimal__c),

 

It is most easy to see what notation to use when navigating the locations array here by debugging it and looking at the list in the debug window that appears when you run the page.

sforce.debug.log(locations);

 

As far as i remember that is all modification needed of the above to make it work!

This was selected as the best answer
Red2678Red2678

Thanks Kalle. 

 

I am trying to implement your solution, but not sure about this:

 

position: new google.maps.LatLng(locations[i].Daily_Reports__r.records.LatDecimal__c, locations[i].Daily_Reports__r.records.LonDecimal__c),

 What is Daily_Reports__r? What are you referencing?

 

I am trying to use the Lead object, and replaced Daily_Reports__r with Lead, but no dice.  I did add the lat / long fields. 

 

Any help is appreciated! Thanks.

 

~Red
Kalle KalifKalle Kalif

Sorry it appears I forgot to mention that I also changed the SOQL query, just to make it work in my situation. The Daily__c is a child object of Vehicle__c, and when referencing it inside an array with Vehicle records on the top I need to use the __r suffix (meaning Relational or something like that). 

 

The important thing is to play around with the debugging tools, to make sure your SOQL query returns results first, and then work your way down each step of the way. 

 

 

anyway, let me just post my entire code that worked fine:

 

<apex:page standardcontroller="Daily__c" tabStyle="Map__tab">
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script src="/soap/ajax/23.0/connection.js" type="text/javascript" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
        //sforce.debug.open();
var markers = [];
$(document).ready(function() {

        // We need the userID to be able to query data
        sforce.connection.sessionId = '{!$Api.Session_ID}';



        // Query data using SOQL.
var user = sforce.connection.getUserInfo();
var records = sforce.connection.query("select name, id, Management_Center__c, (select Id, SF_Approved__c, report_date__c, latdecimal__c, londecimal__c, Noon_ETA__c, Report_date_LT__c, Time_since_report_was_made__c from Daily_Reports__r  order by Report_date__c desc limit 1) from Vehicle__c where Id in (select Vehicle_name__c from daily__c where Report_Date__c=LAST_N_DAYS:365)");
//sforce.debug.log(records);


var locations = new Array();
locations = records.getArray("records");

//sforce.debug.log(locations);
//sforce.debug.log(locations[2].Daily_Reports__r.records.LatDecimal__c);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(0, 0),
      streetViewControl: false,
      mapTypeControl: true,
      panControl: false,
      zoomControl: false,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 200,
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(10,10) 
    });

google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    var marker;
    var i;
       
for (i = 0; i < locations.length; i++) {


//assigning markers         
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].Daily_Reports__r.records.LatDecimal__c, locations[i].Daily_Reports__r.records.LonDecimal__c),
        map: map,
        title: locations[i].Name
      });



//Specifying content of infobox


marker.html = '<div style="background-color:#003366; width: 190px;">This is the HTML content of the infobox.</div>';


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

 
});



</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:600px;
  background:transparent;
}
.button_map {
position: absolute;
left:20px;
margin-top: 5px;
height: 17px;
width: 80px;
z-index: 1;
color: #000;
line-height: 20px;
font-size: 12px;
padding: 0px 5px;
border: 1px solid #a9bbdf;
background: #fdfdfd;
font-weight: bold;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
cursor: hand;
-moz-box-shadow: 0 0 7px 2px #999;
-webkit-box-shadow: 0 0 7px 2px #999;
}
#wrapper {
position: relative;
}
</style>

</head>

<body onload="initialize()">
<div id="map"></div>
</body>
</apex:page>

 

Just play with the SOQL to get what you want and you should be good to go!
Newbie2013Newbie2013

Hi,

   I am trying to implement the same , I am not sure where I am going wrong. I have been successful in displaying the member address, but I have a customer zipcode as well, which needs to display as a marker. Can you help?

 

<apex:page standardController="Member__c">

<head>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8OsrChoU9yb1yoPzTC-pDpmMxU4BYHTg&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 = "{!Member__c.Address__c}, " + "{!Member__c.City__c}, " + "{!Member__c.Zipcode__c}, ";
Var address1 = "{!Member__c.Address__c}, " + "{!Member__c.City__c}, " + "{!Member__c.Zipcode__c}, "

var infowindow = new google.maps.InfoWindow({
content: "<b>{!Member__c.Address__c}, " + "{!Member__c.City__c}, " + "{!Member__c.Zipcode__c},"
});

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: "{!Members__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! {!Member__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:250px;
background:transparent;
}
</style>

</head>

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