Description:-
In this example we explain that how to display Google
maps inside the modal popup using jquery in asp.net. Or display Google maps of
any location inside jquery dialog modal popup.
Here we use Google API to display Google maps in a modal
popup.
You can display Google maps of your Location by just
adding your location Latitude and Longitude in a method.
You can easily find Latitude and Longitude of your
location by using this link
Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="googlemap.aspx.cs" Inherits="googlemap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShowMap").click(function ()
{
$("#dialog").dialog({
modal: true,
title: "Google Map of Iskon
Temple Ahmedabad",
width: 650,
hright: 500,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var mapOptions = {
center: new google.maps.LatLng(23.02715, 72.50852),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($("#div_googlemap")[0], mapOptions);
}
});
});
});
</script>
<title>Display Google Maps of your Location
inside the Modal popup.</title>
</head>
<body>
<form id="form1" runat="server">
<input id="btnShowMap" type="button" value="Show Google Maps of your Location" />
<div id="dialog" style="display: none">
<div id="div_googlemap" style="height: 450px; width: 600px;"></div>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment