Reputation: 457

Google Maps adjusting to include users and address

I am trying to make some adjustments to code and the developer is no longer available to assist. i am clueless when it comes to the GMaps api and code but still I am trying to figure out.

Problem is we have users on the map and we wanted the map to auto zoom in to include all of the users. This we were able to do. However we have a main address that should be included in that to... so what we want to do is auto zoom close enough to include the farthest point, whether it is a user OR the main address. To demonstrate, look at the URL below:

http://app2.wehaveeyes.com/reports/maps/maps2.cfm

If you zoom out you'll see the main address is about 5 miles away.

But this is what we would like it to auto zoom to include the main address

Below is the code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <META HTTP-EQUIV="refresh" CONTENT="10">

    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 100%;  /* The height is the height of the web page */
            width: 100%;  /* The width is the width of the web page */
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .user_info {
            background-color: ##0000;
            font-weight: bold;
            color: #fff;
        }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">      
  </script>
    <script src="https://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-   
 markerwithlabel-1.9.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript">
        // Initialize and add the map
        function initMap() {
            var xml_data = "<MAP>" + 
                    "<location>1 South Main Street, Akron Ohio</location>" + 
                    "<user_info>" + 
                    "<user_name>Scott jones</user_name>" + 
                    "<user_lat>41.141756</user_lat>" + 
                    "<user_lon>-81.675599</user_lon>" + 
                    "<user_img>https://s3.amazonaws.com/media.wbur.org/wordpress/1/files/2015/03/AP736858445562.jpg</user_img>" +
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Bill James</user_name>" + 
                    "<user_lat>41.142758</user_lat>" + 
                    "<user_lon>-81.657274</user_lon>" + 
                    "<user_img>https://s.abcnews.com/images/US/jeff-koenig-ht-ml-190122_hpEmbed_2_4x5_992.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Karrie Sims</user_name>" + 
                    "<user_lat>41.135809</user_lat>" + 
                    "<user_lon>-81.639336</user_lon>" + 
                    "<user_img>https://www.odmp.org/media/image/officer/23891/orig/police-officer-natalie-corona.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>John Smith</user_name>" + 
                    "<user_lat>41.142855</user_lat>" + 
                    "<user_lon>-81.637319</user_lon>" + 
                    "<user_img>https://www.odmp.org/media/image/officer/24262/400/deputy-sheriff-jake-allmendinger.jpg</user_img>" + 
                    "</user_info>" + 
                    "<user_info>" + 
                    "<user_name>Jim Deek</user_name>" + 
                    "<user_lat>41.131543</user_lat>" + 
                    "<user_lon>-81.653541</user_lon>" + 
                    "<user_img>https://lawofficer.com/wp-content/uploads/2016/10/blakesnyder.jpg</user_img>" + 
                    "</user_info>" + 
                    "</MAP>";

            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(xml_data, "text/xml");
            var address = xmlDoc.getElementsByTagName("location")[0].textContent;
            var users = xmlDoc.getElementsByTagName("user_info");
            var user_list = [];

            for (var i = 0; i < users.length; i++) {
                user_list.push({
                    "name": users[i].getElementsByTagName("user_name")[0].textContent,
                    "lat": users[i].getElementsByTagName("user_lat")[0].textContent,
                    "lng": users[i].getElementsByTagName("user_lon")[0].textContent,
                    "img": users[i].getElementsByTagName("user_img")[0].textContent
                });
            }

            // The location of US
            var map_center = {lat: 39.8283, lng: -98.5795};
            // The map, centered at US
            var map = new google.maps.Map(document.getElementById('map'), {zoom: 3, center: map_center});

            // boundary of all pins
            var bounds = new google.maps.LatLngBounds();

            // converts address into geolocation with lat and lng
            geocoder = new google.maps.Geocoder();
            codeAddress(geocoder, map, address);

            // adds user_info marker
            for (const index in user_list) {
                lat = parseFloat(user_list[index]["lat"]);
                lng = parseFloat(user_list[index]["lng"]);

                var point = {lat: lat, lng: lng}
                var lbl_content = "<div style='text-align: center;'><div><img src='" + 
                        user_list[index]["img"] + 
                        "' width='30px' height='38px' style='border: 2px solid #000; display: block; margin: 0 auto;'></div>" + 
                        "<div style='background-color: #000; padding: 2px;'>" + 
                        user_list[index]["name"] + 
                        "</div></div>";
                var marker = new MarkerWithLabel({
                    position: point,
                    icon: {
                        url: "./res/police_pin.png",
                        scaledSize: new google.maps.Size(40, 40)
                    },
                    map: map,
                    title: user_list[index]["name"],
                    labelContent: lbl_content,
                    labelAnchor: new google.maps.Point(0, 0),
                    labelClass: "user_info",
                    labelInBackground: true
                });

                // extends boundary
                bounds.extend(point);

                // shows coordinate tooltip with 4-decisions
               // var infowindow = new google.maps.InfoWindow({
                //    content: lat.toFixed(4) + ", " + lng.toFixed(4)
               // });
               // infowindow.open(map, marker);
            }

            // fits map
            map.fitBounds(bounds);
        }

        /////////////////////////////////////////
        /// converts address into geolocation ///
        /////////////////////////////////////////
        function codeAddress(geocoder, map, address) {
            geocoder.geocode({'address': address}, function (results, status) {
                if (status === 'OK') {
                    // relocates the map centered at address pin
    //                        map.setCenter(results[0].geometry.location);

                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon: {url: "./res/911_call.png", scaledSize: new google.maps.Size(55, 55)}
                    });

                    // shows coordinate tooltip with 4-decisions
                    //lat = results[0].geometry.location.lat();
                    //lng = results[0].geometry.location.lng();
                    //var infowindow = new google.maps.InfoWindow({
                    //    content: lat.toFixed(4) + ", " + lng.toFixed(4)
                    //});
                    //infowindow.open(map, marker);
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        ////////////////////////////
        /// reads local xml file ///
        ////////////////////////////
        function readTextFile(file)
        {
            var allText = "";
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file, false);
            rawFile.onreadystatechange = function ()
            {
                if (rawFile.readyState === 4)
                {
                    if (rawFile.status === 200 || rawFile.status == 0)
                    {
                        allText = rawFile.responseText;
                    }
                }
            }
            rawFile.send(null);
            return allText;
        }

        initMap();
    </script>
  </body>
 </html>

I have gone through so many boards and have tried working with the code but nothing has worked. Any help would be great.

Thank you very much!!!

Upvotes: 0

Answers (1)

annkylah

Reputation: 467

To make sure that every significant location is covered within the map viewport, you could use the map.fitBounds() method. As per this doc, this method

Sets the viewport to contain the given bounds.

I see that you are already implementing this method to display every users. That said, you just have to add the (what you call the) main address on the bounds.

To add the main address' coordinates to the bounds instance, you just have to use the bounds.extend() method.

I checked the code on the site and here's what you can do to achieve this:

Make the variable bounds a global variable by moving it above your initMap() function.

On your codeAddress() function, add the main address' coordinates by extending the bounds. Here's a code snippet for that:

// Add the main address' coordinates by using bounds.extend method
// results[0].geometry.location contains the main address' coordinates
bounds.extend(results[0].geometry.location);

Move the map.fitBounds() method just below the bounds.extend() method on Step #2.
```
// fits map
map.fitBounds(bounds);
```

Here's a working fiddle that's based on your code.

Upvotes: 1

Google Maps adjusting to include users and address

Answers (1)

Related Questions