Integration with Google Maps

Click marker to make popup appear
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Integration with Google Maps</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		div#maps_here {
			position: relative;
			margin-left: 20px;
			width: 600px;
			height: 400px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		}
		div.demo_info {
			position: relative;
			padding: 20px;
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
		}
	</style>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script>
		var myPopup;
		var GMaps, Marker, Overlay;
		var NY = {lat: 40.719837, lng: -73.992348};
		var mapOfs = {};

		function doOnLoad() {

			myPopup = new dhtmlXPopup({mode:"top"});
			myPopup.attachHTML("<div style='position:relative;width:270px;line-height:18px;'>New York – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world.</div>");

			var t = document.getElementById("maps_here");
			mapOfs = {x: dhx4.absLeft(t), y: dhx4.absTop(t)};
			GMaps = new google.maps.Map(t, {
				center: new google.maps.LatLng(NY.lat, NY.lng),
				zoom: 11,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			});

			Marker = new google.maps.Marker({
				position: new google.maps.LatLng(NY.lat, NY.lng),
				title: "Hello",
				map: GMaps
			});

			google.maps.event.addListener(GMaps, "projection_changed", function(){

				Overlay = new google.maps.OverlayView();
				Overlay.setMap(GMaps);
				Overlay.draw = function(){}

				google.maps.event.addListener(Marker, "click", function(e){
					var k = Overlay.getProjection().fromLatLngToContainerPixel(e.latLng);
					myPopup.show(Math.round(k.x)+mapOfs.x, Math.round(k.y)+mapOfs.y-30, 2, 2);
				});
			});

		}

	</script>
</head>
<body onload="doOnLoad();">
	<div class="demo_info">Click marker to make popup appear</div>
	<div id="maps_here"></div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.