#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    First Project: Gmap3 Custom Zoom


    Hi all

    A friend asked me to help him with his website. It's pretty much set up already. He has a map that uses geolocation to get your location (duh) and then display markers for businesses that are near by and registered on the site. Currently there is an auto zoom function that zooms to fill the map with the location circle. He would like it to be zoomed in a little closer than that though.

    Code:
    if(geoloc){
    		if(ajaxGeo){
    			var inputRadius = $('#dir-searchinput-geo-radius').val();
    			if(!isNaN(inputRadius)){
    				var radiusInM = parseInt($('#dir-searchinput-geo-radius').val()) * 1000;
    			} else {
    				var radiusInM = parseInt($('#dir-searchinput-geo-radius').data('default-value')) * 1000;
    			}
    			// autofit by circle
    			mapObj.circle = {
    				options: {
    					center: geoloc,
    					radius : radiusInM,
    					visible : {ifset $themeOptions->search->showAdvancedSearchRadius}true{else}false{/ifset},
    					fillOpacity : 0.15,
    					fillColor : "#2c82be",
    					strokeColor : "#2c82be"
    				}
    			}
    		} else {
    			var radiusInM = parseInt({ifset $geolocationRadius}{$geolocationRadius}{else}100{/ifset}) * 1000;
    			// autofit by circle
    			mapObj.circle = {
    				options: {
    					center: geoloc,
    					radius : radiusInM,
    					visible : {ifset $geolocationCircle}true{else}false{/ifset},
    					fillOpacity : 0.15,
    					fillColor : "#2c82be",
    					strokeColor : "#2c82be"
    				}
    			}
    		}
    	}
    
    	spinnerDiv.fadeOut();
    
    	mapDiv.gmap3( mapObj, "autofit" );
    
    	if(len == 1 && !geoloc){
    		map.setZoom({!$themeOptions->directory->setZoomIfOne});
    	}
    
    }
    
    function generateOnlyGeo(lat,lng,radius) {
    	var geoloc = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
    	// generate geo pin
    	mapDiv.gmap3({
    		marker: {
    			latLng: geoloc,
    			options: {
    				animation: google.maps.Animation.DROP,
    				zIndex: 1000,
    				icon: "{$themeImgUrl}/geolocation-pin.png"
    			}
    		}
    	});
    	// generate and autofit by circle
    	var mapObj = {};
    	var radiusInM = parseInt(radius) * 1000;
    	// autofit by circle
    	mapObj.circle = {
    		options: {
    			center: geoloc,
    			radius : radiusInM,
    			visible : {ifset $themeOptions->search->showAdvancedSearchRadius}true{else}false{/ifset},
    			fillOpacity : 0.15,
    			fillColor : "#2c82be",
    			strokeColor : "#2c82be"
    		}
    	}
    	mapDiv.gmap3( mapObj, "autofit" );
    }
    The map hight is set to 500px and the width is set to take up the whole available width of what ever the display size is. The diameter of the location circle is about 14km. So a few thoughts come to mind. Either reduce the diameter of the location circle, increase the hight of the map or do away with the autofit function and tell it to center on location and zoom in to a specified level.

    Thanks (apologies for the lengthlyness)
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    May 2004
    Posts
    3,417
    Rep Power
    887
    The map hight is set to 500px and the width is set to take up the whole available width of what ever the display size is. The diameter of the location circle is about 14km. So a few thoughts come to mind. Either reduce the diameter of the location circle, increase the hight of the map or do away with the autofit function and tell it to center on location and zoom in to a specified level.
    Anything else on your mind? A question maybe?
    I no longer wish to be associated with this site.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by jwdonahue
    Anything else on your mind? A question maybe?
    Well the initial question: is there a way to alter the code that I pasted so that it doesn't auto fit the way it currently is. I would like it to go to the same zoom level for all users, regardless of their display size.

IMN logo majestic logo threadwatch logo seochat tools logo