放大Google地图标记

Question

I'm using Google Maps API to display an account location and have a function that will then display nearby account locations. 我正在使用Google Maps API显示帐户位置，并具有一个可以显示附近帐户位置的功能。 The issue is I'd like to zoom in to show the markers when the getNearbyAccounts function is called. 问题是调用getNearbyAccounts函数时，我想放大显示标记。 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. 谢谢你的帮助。

Answer 1

Are you just looking to increase the zoom level. 您是否只是想增加缩放级别。 This can be done by set zoom 这可以通过设置缩放来完成

map.setZoom(map.getZoom()+2)

Answer 2

2 options: 2种选择：

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 在您的“ addMarker”函数中，将标记的位置添加到google.maps.LatLngBounds对象（带有.extend），然后将所有标记放置在地图上后，对结果边界进行map.fitBounds
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. 创建一个google.maps.Circle ，其搜索半径位于搜索位置的中心（如果需要，将其显示），然后获取其边界并在其上执行map.fitBounds。

放大Google地图标记

问题描述

2 个解决方案

解决方案1
0 2013-07-20 02:18:56

解决方案2
0 2013-07-21 08:49:18

放大Google地图标记

问题描述

2 个解决方案

解决方案1 0 2013-07-20 02:18:56

解决方案2 0 2013-07-21 08:49:18

解决方案1
0 2013-07-20 02:18:56

解决方案2
0 2013-07-21 08:49:18