google maps
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></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, infobubble;
// Initial position of the map
center = new google.maps.LatLng(-28, 115);
function initialize() {
// Map options
mapOptions = {
zoom: 5,
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 infobubble options
infobubble = new InfoBubble({
maxWidth: 250,
minWidth: 250,
maxHeight: 100,
minHeight: 100,
backgroundColor: 'rgba(65,65,65,0.7)',
disableAnimation: true,
arrowSize: 20,
shadowStyle: 0,
autopanMargin: 50, // default = 10, modify to your heart's content !
content: '<div><a class="dialog" href="https://maps.google.com/" target="_blank"></a></div>',
});
google.maps.event.addListener(marker, 'click', function () {
infobubble.open(map, marker);
google.maps.event.addListener(infobubble, 'domready', function () {
$(".dialog").html('<img id="theImg" src="https://goo.gl/phmzis" />');
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//================================== updated infobubble.js below this line ===========
// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/maps/google_maps_api_v3_16.js
// ==/ClosureCompiler==
/**
* @name CSS3 InfoBubble with tabs for Google Maps API V3
* @version 0.8
* @author Luke Mahe
* @fileoverview
* This library is a CSS Infobubble with tabs. It uses css3 rounded corners and
* drop shadows and animations. It also allows tabs
*/
/*
*...