You need to sign in to do that
Don't have an account?
Kalle 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>
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
should be
And the everywhere I use the [locations] I needed to be more specific.
The above
should be
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.
As far as i remember that is all modification needed of the above to make it work!
All Answers
Did you ever get this working?
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
should be
And the everywhere I use the [locations] I needed to be more specific.
The above
should be
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.
As far as i remember that is all modification needed of the above to make it work!
Thanks Kalle.
I am trying to implement your solution, but not sure about this:
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
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:
Just play with the SOQL to get what you want and you should be good to go!
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>