google maps

by Arkadiy68

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    width:100%;
    height:100%;
    margin:0;
}

JavaScript

// variable definitions
var center, mapOptions, map, marker, infowindow;

// Initial position of the map
center = new google.maps.LatLng(-28, 115);

function initialize() {
    // define map options
    mapOptions = {			    
        zoom: 6,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    // Attach the map to the document
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);     
    
    // The marker details
    marker = new google.maps.Marker({						    
        position: new google.maps.LatLng(-25.363882, 131.044922),
        map: map,
        title: 'marker7'
    });

    // define infowindow options
    infowindow = new google.maps.InfoWindow({
        maxWidth: 450,
        disableAutoPan: false,
        content: '<div><a class="dialog" href="https://maps.google.com/" target="_blank"></a></div>',
    });

	// define the marker click functions
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
        google.maps.event.addListener(infowindow, 'domready', function () {
         var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map_canvas'), {
        position: new google.maps.LatLng(40.8275692,-74.1538405
),
        pov: {
          heading: 260,
          pitch: 5
        }
      });
    map.setStreetView(panorama)
        
			$(".dialog").html('<img id="theImg" src="https://goo.gl/phmzis" />');
         });
    });
}

google.maps.event.addDomListener(window, 'load', initialize);