API tools faq
paste
khnffz

google map example

khnffz
Jun 29th, 2020
312
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .google-map {
  10.             background-color: #e0e0e0;
  11.             height: 40rem;
  12.             max-height: 100vh;
  13.         }
  14.     </style>
  15.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6zh36xeXj6mG8mgGFGzL9TUjAdYkoEoU"></script>
  16. </head>
  17.  
  18. <body>
  19.     <div id="myGoogleMap" class="google-map"></div>
  20.     <script>
  21.         // Set global variables
  22.         var map;
  23.         var bounds;
  24.         var locationCount;
  25.         var mapOptions;
  26.         var infoWindow = null;
  27.         var defaultZoom = 14; // The minimum zoom level
  28.         var mapElementId = "myGoogleMap";
  29.         var mapElement = document.getElementById(mapElementId);
  30.         var useGeocoding = false; // true: geocode marker from street address, false: set markers using lat/lng
  31.  
  32.         // Set marker attributes. If you need unique values for each marker,
  33.         // you can update the values directly in the locations array.
  34.         var markerWidth = 32;
  35.         var markerHeight = 32;
  36.         var markerScale = 1; // Scale the image, if you can't control the source file (0 - 1).
  37.  
  38.         // The array of locations to mark on the map.
  39.         // Google limits geocoded locations to 10 per pageload.
  40.         // No limit for markers set with lat/lng.
  41.         var locations = [
  42.             [
  43.                 "Empire State Building", // name
  44.                 "20 W 34th St", // street
  45.                 "", // street 2
  46.                 "New York", // city
  47.                 "NY", // state
  48.                 "10001", // zip
  49.                 {
  50.                     // Marker icon config object
  51.                     url: "https://maps.google.com/mapfiles/ms/micons/blue.png",
  52.                     size: new google.maps.Size(markerWidth, markerHeight),
  53.                     origin: new google.maps.Point(0, 0),
  54.                     anchor: new google.maps.Point(markerWidth * (markerScale / 2), markerHeight * markerScale),
  55.                     scaledSize: new google.maps.Size(markerWidth * markerScale, markerHeight * markerScale)
  56.                 },
  57.                 new google.maps.Size(markerWidth * (markerScale / 4) * -1, markerHeight *
  58.                 markerScale), // marker offset
  59.                 new google.maps.LatLng(40.7484995, -73.9882267)
  60.             ],
  61.             [
  62.                 "Independence Hall", // name
  63.                 "520 Chestnut St", // street
  64.                 "", // street 2
  65.                 "Philadelphia", // city
  66.                 "PA", // state
  67.                 "19106", // zip
  68.                 {
  69.                     // Marker icon config object
  70.                     url: "https://maps.google.com/mapfiles/ms/micons/red.png",
  71.                     size: new google.maps.Size(markerWidth, markerHeight),
  72.                     origin: new google.maps.Point(0, 0),
  73.                     anchor: new google.maps.Point(markerWidth * (markerScale / 2), markerHeight * markerScale),
  74.                     scaledSize: new google.maps.Size(markerWidth * markerScale, markerHeight * markerScale)
  75.                 },
  76.                 new google.maps.Size(markerWidth * (markerScale / 4) * -1, markerHeight *
  77.                 markerScale), // marker offset
  78.                 new google.maps.LatLng(39.949140, -75.149730)
  79.             ]
  80.         ];
  81.  
  82.         // Init map on Google 'load' event
  83.         google.maps.event.addDomListener(window, "load", init);
  84.  
  85.         // Init the map
  86.         function init() {
  87.             // Customize look of the map.
  88.             // https://www.mapbuildr.com/
  89.             mapOptions = {
  90.                 zoom: defaultZoom,
  91.                 zoomControl: true,
  92.                 zoomControlOptions: {
  93.                     style: google.maps.ZoomControlStyle.SMALL
  94.                 },
  95.                 disableDoubleClickZoom: false,
  96.                 mapTypeControl: false,
  97.                 panControl: false,
  98.                 scaleControl: false,
  99.                 scrollwheel: false,
  100.                 streetViewControl: false,
  101.                 draggable: true,
  102.                 overviewMapControl: false,
  103.                 mapTypeId: google.maps.MapTypeId.ROADMAP,
  104.                 styles: [{
  105.                         featureType: "all",
  106.                         stylers: [{
  107.                             saturation: -100
  108.                         }, {
  109.                             gamma: 0.8
  110.                         }]
  111.                     },
  112.                     {
  113.                         featureType: "poi",
  114.                         stylers: [{
  115.                             visibility: "off"
  116.                         }]
  117.                     },
  118.                     {
  119.                         featureType: "transit",
  120.                         stylers: [{
  121.                             visibility: "off"
  122.                         }]
  123.                     }
  124.                 ]
  125.             };
  126.  
  127.             // Create new map object
  128.             map = new google.maps.Map(mapElement, mapOptions);
  129.  
  130.             // OPTIONAL: Set listener to tell when map is idle
  131.             // Can be useful during dev
  132.             // google.maps.event.addListener(map, "idle", function() {
  133.             // console.log("map is idle");
  134.             // });
  135.  
  136.             if (useGeocoding) {
  137.                 var geocoder = new google.maps.Geocoder();
  138.             }
  139.             bounds = new google.maps.LatLngBounds();
  140.             locationCount = 0;
  141.  
  142.             // Init InfoWindow and leave it
  143.             // for use when user clicks marker
  144.             infoWindow = new google.maps.InfoWindow({
  145.                 content: "Loading content..."
  146.             });
  147.  
  148.             // Loop through locations and set markers
  149.             for (i = 0; i < locations.length; i++) {
  150.                if (useGeocoding) {
  151.                    // street+city,state+zip
  152.                    var address = locations[i][1] + "+" + locations[i][2] + "," + locations[i][3] + "+" + locations[i][
  153.                        4];
  154.  
  155.                    //Get latitude and longitude from address
  156.                    geocoder.geocode({
  157.                        address: address
  158.                    }, onGeocodeComplete(i));
  159.                } else {
  160.                    placeLatLngMarker(i);
  161.                }
  162.            }
  163.  
  164.            // Re-center map on window resize
  165.            google.maps.event.addDomListener(window, "resize", function () {
  166.                var center = map.getCenter();
  167.                google.maps.event.trigger(map, "resize");
  168.                map.setCenter(center);
  169.            });
  170.        } // END init()
  171.  
  172.        // Triggered as the geocode callback
  173.        function onGeocodeComplete(i) {
  174.            // Callback function for geocode on response from Google.
  175.            // We wrap it in 'onGeocodeComplete' so we can send the
  176.            // location index through to the marker to establish
  177.            // content.
  178.            var geocodeCallBack = function (results, status) {
  179.                if (status == google.maps.GeocoderStatus.OK) {
  180.                    // Create the marker for the location
  181.                    // We use 'html' key to attach the
  182.                    // InfoWindow content to the marker.
  183.                    var marker = new google.maps.Marker({
  184.                        icon: locations[i][6],
  185.                        position: results[0].geometry.location,
  186.                        map: map,
  187.                        window_offset: locations[i][7],
  188.                        html: getInfoWindowContent(i)
  189.                    });
  190.  
  191.                    // Set event to display the InfoWindow anchored
  192.                    // to the marker when the marker is clicked.
  193.                    google.maps.event.addListener(marker, "click", function () {
  194.                        showInfoWindow(this);
  195.                    });
  196.  
  197.                    // Add this marker to the map bounds
  198.                    extendBounds(results[0].geometry.location);
  199.                } else {
  200.                    console.log("Location geocoding has failed: " + google.maps.GeocoderStatus);
  201.  
  202.                    // Hide empty map element on error
  203.                    mapElement.style.display = "none";
  204.                }
  205.            }; // END geocodeCallBack()
  206.  
  207.            return geocodeCallBack;
  208.        } // END onGeocodeComplete()
  209.  
  210.        function placeLatLngMarker(i) {
  211.            // Create the marker for the location
  212.            // We use 'html' key to attach the
  213.            // InfoWindow content to the marker.
  214.            var marker = new google.maps.Marker({
  215.                icon: locations[i][6],
  216.                position: locations[i][8],
  217.                map: map,
  218.                window_offset: locations[i][7],
  219.                html: getInfoWindowContent(i)
  220.            });
  221.  
  222.            // Set event to display the InfoWindow anchored
  223.            // to the marker when the marker is clicked.
  224.            google.maps.event.addListener(marker, "click", function () {
  225.                showInfoWindow(this);
  226.            });
  227.  
  228.            // Add this marker to the map bounds
  229.            extendBounds(locations[i][8]);
  230.        }
  231.  
  232.        // The HTML content for the InfoWindow.
  233.        // Includes a form to allow the user to
  234.        // get directions.
  235.        function getInfoWindowContent(i) {
  236.            var windowContent = '<form id="form-directions" action="http://maps.google.com/maps" method="get" target="_blank">\
  237.         <p><strong>' + locations[i][0] + '</strong><br>\
  238.         ' + locations[i][1] + ', ' + locations[i][2] + '<br>\
  239.         ' + locations[i][3] + ', ' + locations[i][4] + ' ' + locations[i][5] + '</p>\
  240.         <input type="hidden" name="daddr" value="' + locations[i][1] + ', ' + locations[i][3] + ', ' + locations[i][4] +
  241.                ' ' + locations[i][5] + '" />\
  242.         <label for="saddr" class="alt-italic">Need directions?</label>\
  243.         <div class="input-group input-group--inline input-group--sm">\
  244.         <input name="saddr" type="text" class="input-group__input" placeholder="Your Address...">\
  245.         <button class="input-group__btn button" type="submit">Go!</button>\
  246.         </div><!-- /input-group -->\
  247.         </form>';
  248.  
  249.             return windowContent;
  250.         }
  251.  
  252.         function showInfoWindow(marker) {
  253.             // Updates the InfoWindow content with
  254.             // the HTML held in the marker ('this').
  255.             infoWindow.setOptions({
  256.                 content: marker.html,
  257.                 pixelOffset: marker.window_offset
  258.             });
  259.             infoWindow.open(map, marker);
  260.         }
  261.  
  262.         // Establishes the bounds for all the markers
  263.         // then centers and zooms the map to show all.
  264.         function extendBounds(latlng) {
  265.             ++locationCount;
  266.  
  267.             bounds.extend(latlng);
  268.  
  269.             if (locationCount == locations.length) {
  270.                 map.fitBounds(bounds);
  271.  
  272.                 var currentZoom = map.getZoom();
  273.                 if (currentZoom > mapOptions.zoom) {
  274.                     map.setZoom(mapOptions.zoom);
  275.                 }
  276.             }
  277.         } // END extendBounds()
  278.     </script>
  279. </body>
  280.  
  281. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!