zoom in on google map markers
Question
I'm using Google Maps API to display an account location and have a function that will then display nearby account locations. The issue is I'd like to zoom in to show the markers when the getNearbyAccounts function is called. At the current zoom level you cannot see all the markers. It just looks like a clump of markers all jumbled together.
Here is my page code:
<apex:page standardController="Account" extensions="AccountMapControllerExtension" doctype="html-5.0" >
<apex:sectionHeader title="Account Mapping Tool"/>
<title>Account Map</title>
<head>
<!-- STYLE SHEETS -->
<apex:stylesheet value="{!URLFOR ($Resource.jQueryUI, '/css/ui-lightness/jquery-ui-1.9.0.custom.css')}" />
</head>
<style>
.urlLinks {
color: blue;
text-decoration:underline
}
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:400px;
padding: 20px;
}
.roundCornerCss{
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
#loadingScreen {
background: url({!URLFOR($Resource.Markers, 'Markers/ajax-loader.gif')}) no-repeat 5px 8px;
padding-left: 50px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
<body>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-1.8.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-1.8.2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-ui-1.9.0.custom.js')}"/>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Global Variables
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var places = [];
var title_content = new Array();
var popup_content = new Array();
var address = new Array();
var address_position = 0;
var timeout = 600;
var pendingCalls = {};
var markersArray = [];
$j = $.noConflict(); // No Conflict Custom $j
// Initialize
$j(document).ready(function(){
var acctId = document.getElementById("hdnAccountId").value;
if(acctId == "") {
$j("#inputDiv").css("display","none");
}
regDialogs();
});
// Load Google Map
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.3583, -71.0603); // Boston, MA as Center
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function regDialogs(){
$j( "#pendDiv" ).dialog({
autoOpen: false,
title: 'Pending Call Reports'
});
$j("#loadingScreen").dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 50,
modal: true,
buttons: {},
resizable: false,
open: function() {
// scrollbar fix for IE
$j('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$j('body').css('overflow','auto');
}
}); // end of dialog
}
// Waiting Dialog on Loading
function waitingDialog() {
$j("#loadingScreen").html('<p>Please Wait ...</p>');
$j("#loadingScreen").dialog('option', 'title', 'Loading');
$j("#loadingScreen").dialog('open');
}
// Close Waiting Dialog
function closeWaitingDialog() {
$j("#loadingScreen").dialog('close');
}
function getCurrentAccountMap() {
var billingStreet = '{!account.BillingStreet}';
var billingCity = '{!account.BillingCity}';
var billingState = '{!account.BillingState}';
var billingCountry = '{!account.BillingCountry}';
var billingPostalCode = '{!account.BillingPostalCode}';
address_position = 0;
$j("#messages").empty();
clearOverlay(); // Remove existing markers if any
var addr = billingStreet + ',' + billingCity + ',' +
billingState + ',' + billingCountry + ',' +
billingPostalCode;
address.push(addr);
addMarker(address_position);
}
function getAccountsNearbyMap(){
waitingDialog(); // Start Loading
var lat = '{!account.Geolocation__Latitude__s}';
var lng = '{!account.Geolocation__Longitude__s}';
var distance = '';
lat = parseFloat(lat);
lng = parseFloat(lng);
if($j("select option:selected").text() == 'within 10 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 25 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 50 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 100 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 250 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 500 miles'){
distance = $j("select option:selected").val()
}
AccountMapControllerExtension.getNearbyAccounts(lat,lng,distance,function(result,event){
$j("#messages").empty();
clearOverlay(); // Remove existing markers if any
if(event.type == 'exception'){
alert('Error ' + event.message);
}else {
address = new Array();
address_position = 0;
var completeDate = '';
var pendClick = '';
var hasCallRecords = false;
$j.each(result,function(rec){
var addr = result[rec].BillingStreet + ',' + result[rec].BillingCity + ',' +
result[rec].BillingState + ',' + result[rec].BillingCountry + ',' +
result[rec].BillingPostalCode;
address.push(addr);
});
if(address.length > 1){
addMarker(address_position);
}else{
addMarker(address_position);
$j("#messages").append('<h3 style="color:red;">There are no nearby accounts found within the range specified</h3><br/>');
closeWaitingDialog();
return false;
}
}
});
}
function addMarker(position){
geocoder.geocode({'address': address[position]}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
places[position] = results[0].geometry.location;
var marker = new google.maps.Marker({
position: places[position],
title:title_content[position],
icon: getMapIconUrl(position),
map: map
});
map.setCenter(marker.getPosition());
map.setZoom(map.getZoom()+2);
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow({maxWidth: 200});
}
infowindow.setContent(popup_content[position]);
infowindow.open(map, marker);
});
}
else{
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
}
address_position++;
if (address_position < address.length){
setTimeout(function() { addMarker(address_position); }, (timeout));
}
closeWaitingDialog();
});
}
function clearOverlay(){
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
/*
Sets the Marker Type/Color
*/
function getMapIconUrl(markerNumber){
var mapIconUrl = "{!URLFOR($Resource.Markers, 'Markers/PinkPin.png')}";
return mapIconUrl;
}
window.onload = function() {
getCurrentAccountMap();
};
</script>
<!-- HTML Content -->
<input type="hidden" value="{!account.Id}" id="hdnAccountId" />
<div id="inputDiv">
Search Nearby Accounts
<select id="selectOption">
<option value="10">within 10 miles</option>
<option value="25">within 25 miles</option>
<option value="50">within 50 miles</option>
<option value="100">within 100 miles</option>
<option value="250">within 250 miles</option>
<option value="500">within 500 miles</option>
</select><br/>
<div id="rangeDiv"></div><br/>
<input type="button" onclick="getAccountsNearbyMap();" class="btn" value="Get Accounts Nearby"/>
</div><br/><br/>
<div id="messages"></div><br/>
<div id="map" class="roundCornerCss"></div>
<script>
initialize();
</script>
<div id="canvas_div"></div>
<div id="pendDiv"></div>
<div id="loadingScreen"></div>
</body>
</apex:page>
Thanks for any help.
2 answers
solution1
0 2013-07-20 02:18:56
Are you just looking to increase the zoom level. This can be done by set zoom
map.setZoom(map.getZoom()+2)
solution2
0 2013-07-21 08:49:18
2 options:
In your "addMarker" function, add the position of the marker to a google.maps.LatLngBounds object (with .extend), then once all the markers have been placed on the map, do a map.fitBounds on the resulting bounds
Create a google.maps.Circle with the search radius centered on the search location (display it if you want), then get its bounds and do a map.fitBounds on it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Google Places - Markers drop on to the map on scroll/zoom
How to zoom a Google map to a percentage of markers
Error hiding markers on google map javascript api zoom 3.7
How to change markers on zoom change in google map api
Google API v3 fit map zoom and bounds to all markers
Google MAP API v3: Center & Zoom on displayed markers
google map api how to zoom in and then out by clicking one of several markers
How to set the Google Map zoom level to show all the markers?
Google places API place multiple markers on the map and zoom to where most markers are
Google Maps API markers and zoom
Related Tags