Google Maps multiple maps displayed instead of one

Question

I am using Google Maps Javascript API to display this on my website. I am setting the current location of visitor with a red mark and then marking my customers within 10 kms from current location.

I am unable to display both the visitor and my customer in a single view. Meaning zoom it to that level. google.maps.LatLngBounds did not work for me. I am wondering why.

Meanwhile, I zoomed out completely and I see 4 maps at one place. I don't know how this is happening.

My code is below

<section id="wrapper" class="row main-section" style="height: 100%;">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script>
                                function success(position) {
                                    var mapcanvas = document.createElement('div');
                                    mapcanvas.id = 'mapcontainer';
                                    var myHeight = document.getElementById("scrHeight").value;
                                    var myWidth = document.getElementById("scrWidth").value;
                                    console.log(myHeight);
                                    myHeight = myHeight-155;
                                    console.log(myHeight);
                                    console.log(myWidth);
                                    mapcanvas.style.height = myHeight+'px';
                                    mapcanvas.style.width = '100%';

                                    document.querySelector('article').appendChild(mapcanvas);

                                    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                                    var options = {
                                        zoom: 16,
                                        center: coords,
                                        mapTypeControl: false,
                                        navigationControlOptions: {
                                            style: google.maps.NavigationControlStyle.SMALL
                                        },
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    };
                                    var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

                                    var marker = new google.maps.Marker({
                                          position: coords,
                                          map: map,
                                          title:"You are here!"
                                    });
                                    var myTable = document.getElementById("markerTable");
                                    var myLength = myTable.rows.length;
                                    var infowindow = new google.maps.InfoWindow({ maxWidth: 360 });
                                    var markers = new Array();
                                    var latlngbounds = new google.maps.LatLngBounds();



                                    for (var i = 0; i < myLength; i++) {
                                        var myRow = document.getElementById("markerTable").rows[i].cells;
                                        var myId = myRow[0].innerHTML;
                                        var myDisplayName = myRow[1].innerHTML;
                                        var myShortPres = myRow[2].innerHTML;
                                        var myAddress = myRow[3].innerHTML;
                                        var myLatitude = myRow[4].innerHTML;
                                        var myLongitude = myRow[5].innerHTML;
                                        var myRate = myRow[6].innerHTML;
                                        var myLabel = myRow[7].innerHTML;
                                        var contentString = '<html code here>';
                                        console.log("name", contentString);
                                        var coords = new google.maps.LatLng(myLatitude, myLongitude);
                                        //var infowindow = new google.maps.InfoWindow({ content: contentString });
                                        var marker = new google.maps.Marker({
                                            position: coords,
                                            map: map,
                                            title: myDisplayName,
                                            icon: "http://labs.google.com/ridefinder/images/mm_20_white.png"
                                        });
                                         //latlngbounds.extend(coords);
                                        markers.push(marker);
                                        google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
                                            return function() {
                                                infowindow.setContent(contentString);
                                                infowindow.open(map, marker);
                                            };
                                        })(marker, contentString));
                                    }
                                    //map.fitBounds(latlngbounds);
                                    //function AutoCenter() {
                                    //  Create a new viewpoint bound
                                    //    var bounds = new google.maps.LatLngBounds();
                                    //  Go through each...
                                    //    $.each(markers, function (index, marker) {
                                    //        bounds.extend(marker.position);
                                    //    });
                                    //  Fit these bounds to the map
                                    //    map.fitBounds(bounds);
                                    //}
                                    //AutoCenter();
                                    google.maps.event.addListener(map, "click", function () {
                                        infowindow.close(); 
                                    });
                                }
                                if (navigator.geolocation) {
                                    navigator.geolocation.getCurrentPosition(success);
                                } else {
                                    error('Geo Location is not supported');
                                }
                            </script>

Can someone pls help?

geolocation is failing for me. Add a "failure" function to handle that, currently you only have a "success" function. [syntax of navigator.geolocation.getCurrentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition) — geocodezip, Oct 28 '14 at 00:30

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

The below snippet is what is setting your map on your page. :

var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

Have you stepped through your code to ensure this isn't being set more than once?

If you do that and the map is only being set once, it probably has something to do with the size of your map holder and the map itself.

Set the below to fix that specific issue. :

 map.setOptions({ minZoom: 5, maxZoom: 15 });

google map zoom out limit

edited May 23 '17 at 12:20

Community

1
1

answered Oct 27 '14 at 21:07

Bill Blankenship

3,316
6
43
73

http://jsfiddle.net/3Vma6/8/ Found this link from another stackoverflow question. If you zoom out fully, then u can see the same issue as mine here.. – Uma Ilango Oct 27 '14 at 21:43
Looks like it is not a bug.. but that's the way Google Map works. I went to https://www.google.com/maps/place/Donaustra%C3%9Fe+58,+12043+Berlin,+Germany/@68.4085969,65.1754309,3z/data=!4m2!3m1!1s0x47a84fa1237d85b3:0xf25046ac55168b64?hl=en-US an address is located here. Then I zoomed out fully and moved around. Same behavior like mine. This looks something like rotating the globe. – Uma Ilango Oct 27 '14 at 21:47
Ok, I misintepreted. I thought you had multiple map objects. Set the above map option and that should fix it. I have ran into the same before also. – Bill Blankenship Oct 27 '14 at 23:02

Google Maps multiple maps displayed instead of one

1 Answers1