Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <style>
- body { padding: 0; margin: 0;}
- h3 { padding: 0; margin: 0; }
- #map_wrapper { height: 100%; }
- #map_canvas { width: 100%; height: 100%; }
- </style>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
- <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize" async defer></script>
- <script>
- function initialize() {
- var map;
- var bounds = new google.maps.LatLngBounds();
- var mapOptions = {
- mapTypeId: 'hybrid',
- center: {lat: 40.730610, lng: -73.935242}
- };
- map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
- map.setTilt(45);
- // Define multiple markers
- var markers = [
- ['Times Square, Manhattan, NY', 40.758896, -73.985130],
- ['Central Park, New York, NY', 40.785091, -73.968285],
- ['Empire State Building, New York, NY', 40.748817, -73.985428]
- ];
- // Define info window content
- var infoWindowContent = [
- ['<div class="info_content"><h3>Times Square, Manhattan, NY</h3><p>Times Square is a famous central square in Theater District of Manhattan, New York. It is located at the junction of Boradway and the Seventh Avenue. It appeared in the beginning of the last century and witnessed plenty of historic events. There are plenty of famous establishments located at the square, including Madame Tussauds Wax Museum, The Hard Rock Cafe New York, the Paramount Building, etc.</p></div>'],
- ['<div class="info_content"><h3>Central Park, New York, NY</h3><p>One of the key landmarks of New Your City and Manhattan, Central Park is one of the most famous parks in the world. It appeared in many movies and plays an important role in local and American culture as a National Historic Site. The park is open year round and it is estimated that every year over 37 million people visit this amazing place.</p></div>'],
- ['<div class="info_content"><h3>Empire State Building, New York, NY</h3><p>The Empire State Building is one of the world\'s most famous skyscraper located at 350 5th Avenue, Manhattan, New York. This building is given the name to the state, "The Empire State". It used to be the tallest buildings in New York after September 11, but now One World Trade Center is considered the tallest building of the city.</p></div>']
- ];
- // Display multiple markers on a map
- var infoWindow = new google.maps.InfoWindow(), marker, i;
- // Loop through our array of markers & place each one on the map
- for( i = 0; i < markers.length; i++ ) {
- var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
- bounds.extend(position);
- marker = new google.maps.Marker({
- position: position,
- map: map,
- title: markers[i][0]
- });
- // Allow each marker to have an info window
- google.maps.event.addListener(marker, 'click', (function(marker, i) {
- return function() {
- infoWindow.setContent(infoWindowContent[i][0]);
- infoWindow.open(map, marker);
- }
- })(marker, i));
- // Automatically center the map fitting all markers on the screen
- map.fitBounds(bounds);
- }
- // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
- var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
- this.setZoom(14);
- google.maps.event.removeListener(boundsListener);
- });
- }
- </script>
- </head>
- <body>
- <div id="map_wrapper"><div id="map_canvas" class="mapping"></div></div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment
