Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times

    Centering Custom Google Map Pins

    Hi All,

    I am having some big trouble trying to get my custom google map pins centered, and zoomed-in to show them all at the same time.

    Can anyone perhaps spot why this isn't working!?

    Here is the code below:

    Thanks !!!

    Code:
    var scriptFolder = location.pathname.substr(0, location.pathname.lastIndexOf('/') + 1);
        var marker = [];
        var map;
        var lastZoom = 3;
        var lastSizeW = 40;
        var lastSizeH = 30;
    
        function initialize() {
            var styles = [
                {"elementType": "geometry", "stylers": [{"visibility": "no"}]}, {"elementType": "labels", "stylers": [{"visibility": "no"}]}, {"stylers": [{"color": "#ffffff"}, {"visibility": "yes"}]}, {}
                        ];
            var styledMap = new google.maps.StyledMapType(styles);
            var centerlatlng = new google.maps.LatLng(0, 0);
            var myOptions = {
                zoom: 3
                , center: centerlatlng
                , styles: styles
                , panControl: true
                , zoomControl: false
                , mapTypeControl: false
                , scaleControl: false
                , streetViewControl: false
                , overviewMapControl: false
                , rotateControl: true
                , disableDefaultUI: true
                , mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            var zoomControlDiv = document.createElement('div');
            var zoomControl = new ZoomControl(zoomControlDiv, map);
            var image_bar = document.getElementById("pin_image_bar");
            zoomControlDiv.index = 1;
            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);
            map.controls[google.maps.ControlPosition.RIGHT_TOP].push(image_bar);
            createMarker();
            google.maps.event.addDomListener(map, 'zoom_changed', function () {
                var zoom = map.getZoom();
                if (zoom > lastZoom) {
                    lastSizeW = lastSizeW + 40;
                    lastSizeH = lastSizeH + 30;
                    for (i in marker) {
                        var image = new google.maps.MarkerImage(scriptFolder + "" + pins[i].Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));
                        marker[i].setIcon(image);
                    }
                }
                else {
                    if (lastSizeW != 40 && lastSizeH != 30) {
                        lastSizeW = lastSizeW - 40;
                        lastSizeH = lastSizeH - 30;
                    }
                    for (i in marker) {
                        var image = new google.maps.MarkerImage(scriptFolder + "" + pins[i].Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));
                        marker[i].setIcon(image);
                    }
                }
                lastZoom = zoom;
            });
            $('#map').children().closest('div').append(' <video loop="" autoplay="" poster="image_xi_logo_01.png" style="position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;opacity:0.7;"><source src="video_xi_bg_05a.webm" type="video/webm"> </video>');
      $('.gm-style').children().children().closest('div').addClass('pins');
    	}
    
        
        function createMarker() {
            var bounds = new google.maps.LatLngBounds();
            for (i in pins) {
                var position = new google.maps.LatLng(pins[i].Lat, pins[i].Lng);
                var image = new google.maps.MarkerImage(scriptFolder + "" + pins[i].Image, null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(lastSizeW, lastSizeH));
                marker[i] = new google.maps.Marker({
                    map: map
                    , title: pins[i].Name
                    , position: position
                    , icon: image
                });
                /*var content = '<div id="iw-container">';
                content += '<div class="iw-title">'+pins[i].Info.Title+'</div>';
                content += '<div class="iw-content">';
                content += '<div class="iw-subTitle">'+pins[i].Info.Content.Title+'</div>';
                content += '<img src="images/'+pins[i].Image+'" alt="'+pins[i].Info.Title+'" height="115" width="83">';
                content += '<p>'+pins[i].Info.Content.Detail+'</p>';
                content += '</div>';
                content += '<div class="iw-bottom-gradient"></div>';
                content += '</div>';*/
                bounds.extend(marker[i].getPosition());
                marker[i].pinDetail = pins[i];
                        google.maps.event.addListener(marker[i], 'click', function () {
                    $("#pname").html(this.pinDetail.Name);
                    var image = "<img src='" + this.pinDetail.Image + "' style='visibility:visible;'/>"
                    $("#pimage").html(image);
                    $("#ptitle").html(this.pinDetail.Info.Title);
                    $("#pcontent").html(this.pinDetail.Info.Content);
                    document.getElementById('pin_image_bar').style.display='';
                    document.getElementById('overlay').style.display='';
                    $('#overlay').show();
                    $('#pin_image_bar').show();
                });
            }
    
        }
        function ZoomControl(controlDiv, map) {}

  2.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    37
    Member #
    39433
    Liked
    1 times
    i've just answered my own question by adding directly after "var bounds = new google.maps.LatLngBounds();" the following:

    Code:
    map.fitBounds(bounds);  
    map.panToBounds(bounds);


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com