Google Maps multiple maps displayed instead of one

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?

Upvotes: 0

Answers (1)

Bill Blankenship

Reputation: 3356

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

Upvotes: 1

Google Maps multiple maps displayed instead of one

Answers (1)

Related Questions