How To Open Google Map in ModalPopup Extender

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default12.aspx.cs" Inherits="Default12" %>

<%@ Register TagPrefix="ajaxToolkit" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Maps JavaScript API Example</title>
  <script type="text/javascript">
function OpenModalPopup(ModalId, xParam, yParam, divID) {
  var popup = $find(ModalId);
  popup.show();
  load(xParam, yParam, divID);
}
  function load() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GMapTypeControl());
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      map.setCenter(new GLatLng(0,0),0);
      // create bounds object used for calculating the zoom level and center dynamicaly
      var bounds = new GLatLngBounds();
      // Creates a marker at the given point with the details
      function createMarker(point, description) {
          var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(description);
          });
          return marker;
      }
     
      //iterate trough the location and descriptions
      for (var i = 0; i < descriptions.length; i++) {
        var lat = parseFloat(coordinates[i*2]);
        var lon = parseFloat(coordinates[(i*2) + 1]);        
        var point = new GLatLng(lat, lon);        
        var d = descriptions[i]
        //extend the bounds with the current point
        bounds.extend(point);
    
        map.addOverlay(createMarker(point, descriptions[i]));
      }
        //finaly set the zoom level and center acording to the markers set on the map
        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    }
  }

  var coordinates =  new Array('61.8052','21.6417','61.6052','21.8417',
                                           '61.4052','22.0417','61.2052','22.2417',
                                           '61.0052','22.4417','60.8052','22.6417',
                                           '60.6052','22.8417','60.4052','23.0417',
                                           '60.2052','23.2417','60.0052','23.4417');
  var descriptions =  new Array('<div><strong>Point 1<strong></div>',
                                           '<div><strong>Point 2<strong></div>',
                                           '<div><strong>Point 3<strong></div>',
                                           '<div><strong>Point 4<strong></div>',
                                           '<div><strong>Point 5<strong></div>',
                                           '<div><strong>Point 6<strong></div>',
                                           '<div><strong>Point 7<strong></div>',
                                           '<div><strong>Point 8<strong></div>',
                                           '<div><strong>Point 9<strong></div>',
                                           '<div><strong>Point 10<strong></div>');

  </script>

  <style type="text/css">
  .modalBackground {
  background-color: #000;
  filter:alpha(opacity=50);
  opacity:0.5;
}

.modalPopup {
  background-color:#ffffdd;
  border-width:3px;
  border-style:solid;
  border-color:Gray;  
}
  </style>
</head>
<body onunload="GUnload()">
  <form id="default" runat="server">
      <asp:ScriptManager ID="ScriptManager" runat="server" />
      <asp:HyperLink ID="HiddenButton" runat="server" />
      <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="#"
 onclick="javascript:OpenModalPopup('ModalPopup', '72.0052', '21.4417', 'map');">Open Map</asp:HyperLink>
      <div id="mapContainer" runat="server" class="modalPopup">
          <div id="mapHeader" style="cursor: move; width: 600px; height: 30px;">
              <div>
                  <p>
                      Google Map Results:
                      <asp:LinkButton ID="CloseMapButton" runat="server" Text="Close Map" /></p>
              </div>
          </div>
          <div id="map" style="width: 600px; height: 500px; position: relative;" />
      </div>
      <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="HiddenButton"
          PopupControlID="mapContainer" BackgroundCssClass="modalBackground" CancelControlID="CloseMapButton"
          DropShadow="false" BehaviorID="ModalPopup" PopupDragHandleControlID="mapHeader" />
  </form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default12 : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {

  }
  protected void Page_Init(object sender, EventArgs e)
  {
      if (!Page.IsStartupScriptRegistered("googleMapScript"))
      {
          // Register Startup Script for Google Maps API
          string myScript = "<script type=\"text/javascript\" src=\"" + ConfigurationManager.AppSettings["localhost"] + "\"></script>";
          this.Page.ClientScript.RegisterStartupScript(typeof(Page), "googleMapScript", myScript);
      }
  }
}
Reactions

Post a Comment

2 Comments

  1. This doesn't work. The modal popup extended does appear, but not the Google map.

    ReplyDelete
  2. The reason the example as published doesn't work is because there's no reference to the Google Maps site! Add the following *inside a script tag* inside the head section near the top of the listing, right after the title tag.
    Don't forget to include the closing tag.

    src="http://maps.google.com/maps?file=api&v=2&key=abcdef&sensor=false"
    type="text/javascript"

    When you run the example, you'll see a hyperlink that says "Open Map". When you click it, what will come up is a Google map with markers at the coordinates defined in the coordinates array. These fall in a diagonal line across southwestern Finland.

    Jim Collier
    cross-comp.com
    Los Angeles (coords: 34 N, -118 W)

    ReplyDelete

Please do not post any spam link in the comment box😊

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

Close Menu