You need to sign in to do that
Don't have an account?
Michael Schell
Google Map - Custom Object
Hi, I was able to create a google map on a custom object through a VF page. I was wondering if there is a way to click that map and it opens a new window taking me to google maps and that location? Similar to what is built into the Accounts already, if you click that map it opens a new tab and google maps appears. Thanks!
Hi Michael;
You can pass parameters to google maps. So on you visualforce page,you maps onclick attr needs to have something like window.open('http://maps.google.com/maps?z=10&t=h&q=loc:38.417675+27.0797171,12')
on the URL;
z --> stands for the zoom level (1-20)
t --> stands for the map type (m map, k satellite, h hybrid, p terrain, e GoogleEarth)
q --> stands for the search query, if you use it with loc prefix then google understands it is a latitude and longitude separated by a + symbol
Please mark the answer as Best Answer if this is the answer you are looking for.
<apex:page standardController="Property__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.MAP,
mapTypeControl: true
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = "{!SUBSTITUTE(JSENCODE(Property__c.Address__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.City__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.State__c),'\n',' ')}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Address__c}</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: "{!Property__c.Address__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>
Hi Michael;
Please replace the script in your code with this;
If you get any error or if this is not the solution you are looking for I can help you any time but if this answer covers your problem please mark it as best answer.
Regards;
Mert
I forgot to metion if you want to add marker to you center location please change completeUrl with this
var completeUrl = 'http://maps.google.com/maps?z=15&t=m&q=loc:'+centerLoc+'&||'centerLoc;
Last centerLoc is marker location. You can set different location to marker if you need.
<script type="text/javascript">
$(document).ready(function() {
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.MAP,
mapTypeControl: true
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = "{!SUBSTITUTE(JSENCODE(Property__c.Address__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.City__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Property__c.State__c),'\n',' ')}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Address__c}</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: "{!Property__c.Address__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());
});
<b>////////////////////////////////MAP ON CLICK EVENT/////////////////////////////
google.maps.event.addListener(map,'click',function() {
var centerLoc = results[0].geometry.location;
console.log('centerLoc==>>'+centerLoc);
// If the format of centerLoc does not look like this 40.748416+-73.985664
//but look like this 40.748416 , -73.985664 please use the commended out code below
/*
if(centerLoc.indexOf(',')>0){
centerLoc = centerLoc.split(',');
centerLoc = centerLoc[0]+'+'+centerLoc[1];
centerLoc=centerLoc.replace(/ /g,'');
}
*/
console.log('centerLoc2==>>'+centerLoc);
var completeUrl = 'http://maps.google.com/maps?z=15&t=m&q=loc:'+centerLoc;
console.log('completeUrl==>>'+completeUrl);
window.open(completeUrl);
});
/////////////////////////END OF MAP ON CLICK EVENT/////////////////////////////</b>
}
} 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>
We do not require Google API is.
Let me know if anyone wants to implement the solution.
Email: sfdc.avadhut@gmail.com
Thanks,
Avadhut