Google Map API Zoom The Marker Example

-
Google Map API Marker is a powerful API to use for web page to mark on the map for example the location of your business office. This tutorial can use in all framework as long as the framework use html language to render the content to client side.

You can refer here for more information of Google Map API

Let see the example in asp.net framework.

The Javascript to call map and marker

var map;
function initializeGMap() {
           var Centre = new google.maps.LatLng(3.15681, 101.714696);
            var mapOptions = { zoom: 12, center: Centre, mapTypeId: google.maps.MapTypeId.ROADMAP };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var KLCC = new google.maps.LatLng(3.15681, 101.714696);
            var marker = new google.maps.Marker({ position: KLCC, map: map, title: 'Kuala Lumpur City Center' });  
        }
        google.maps.event.addDomListener(window, 'load', initializeGMap);


The Zoom Marker Script

function getInfo() {
            var contentString = '<div style="width: 400px; min-height: 100px;">';
            contentString += '<table style="font-size:12px; width:400px; height: 100px; border: none !important;">';
            contentString += '<tr style=\"background:none !important;\">';
            contentString += '<td valign=\"top\" style=\"width: 80px; height: 80px;border-bottom:none;\"></td>';
            contentString += '<td valign=\"top\" style=\"border-bottom:none;\">';
            contentString += '<table><tr style=\"background:none !important;\">';
            contentString += '<td style=\"font-size:16px;border-bottom:none;\">';
            contentString += '<b>Kuala Lumpur City Centre</b></td></tr>';
            contentString += '<tr style=\"background:none !important;\">';
            contentString += '<td style=\"border-bottom:none;\">';
            contentString += 'Kuala Lumpur City Centre<br />50450 Kuala Lumpur<br/>Wilayah Persekutuan Kuala Lumpur, Malaysia</td>';
            contentString += '</tr></table></td></tr><tr style=\"background:none !important;\">';
            contentString += '<td style=\"border-bottom:none;\">&nbsp;</td></tr>';
            contentString += '<tr style=\"background:none !important;border-bottom:none;\">';
            contentString += '<td colspan="2"></td></tr><tr style="background:none !important;">';
            contentString += '<td colspan="2" style=\"border-bottom:none;\"><b>Phone:</b>-</td>';
            contentString += '</tr></td></tr></table></div>';
            var infoWindowMarker = new google.maps.InfoWindow({
                content: contentString
            });
            var myLatLng = new google.maps.LatLng(3.15681, 101.714696);
            var myMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Kuala Lumpur City Centre'
            });
            infoWindowMarker.close();
            infoWindowMarker.open(map, myMarker);
            map.setCenter(myLatLng);
            map.setZoom(17);

        }


The ASPX Page

<div style="width: 600px; height: 400px; float:left;">
        <div id="map-canvas" style="width: 100%; height: 100%;">
        </div>
    </div>
    <div style="float:right;">
        <div id="Div1" style="width: 100%; height: 100%; text-align:left; padding:20px;">
            <asp:Button ID="Button1" runat="server" Text="Zoom The Marker" OnClientClick="getInfo();return false;" />
        </div>
    </div>


Full Code

Note : This example use default MasterPage from Visual Studio 2010

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        var map;

        function initializeGMap() {

            var Centre = new google.maps.LatLng(3.15681, 101.714696);
            var mapOptions = { zoom: 12, center: Centre, mapTypeId: google.maps.MapTypeId.ROADMAP };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var KLCC = new google.maps.LatLng(3.15681, 101.714696);
            var marker = new google.maps.Marker({ position: KLCC, map: map, title: 'Kuala Lumpur City Center' });
            
        }
        google.maps.event.addDomListener(window, 'load', initializeGMap);
    
        function getInfo() {
            var contentString = '<div style="width: 400px; min-height: 100px;">';
            contentString += '<table style="font-size:12px; width:400px; height: 100px; border: none !important;">';
            contentString += '<tr style=\"background:none !important;\">';
            contentString += '<td valign=\"top\" style=\"width: 80px; height: 80px;border-bottom:none;\"></td>';
            contentString += '<td valign=\"top\" style=\"border-bottom:none;\">';
            contentString += '<table><tr style=\"background:none !important;\">';
            contentString += '<td style=\"font-size:16px;border-bottom:none;\">';
            contentString += '<b>Kuala Lumpur City Centre</b></td></tr>';
            contentString += '<tr style=\"background:none !important;\">';
            contentString += '<td style=\"border-bottom:none;\">';
            contentString += 'Kuala Lumpur City Centre<br />50450 Kuala Lumpur<br/>Wilayah Persekutuan Kuala Lumpur, Malaysia</td>';
            contentString += '</tr></table></td></tr><tr style=\"background:none !important;\">';
            contentString += '<td style=\"border-bottom:none;\">&nbsp;</td></tr>';
            contentString += '<tr style=\"background:none !important;border-bottom:none;\">';
            contentString += '<td colspan="2"></td></tr><tr style="background:none !important;">';
            contentString += '<td colspan="2" style=\"border-bottom:none;\"><b>Phone:</b>-</td>';
            contentString += '</tr></td></tr></table></div>';
            var infoWindowMarker = new google.maps.InfoWindow({
                content: contentString
            });
            var myLatLng = new google.maps.LatLng(3.15681, 101.714696);
            var myMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Kuala Lumpur City Centre'
            });
            infoWindowMarker.close();
            infoWindowMarker.open(map, myMarker);
            map.setCenter(myLatLng);
            map.setZoom(17);

        }
      </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="width: 600px; height: 400px; float:left;">
        <div id="map-canvas" style="width: 100%; height: 100%;">
        </div>
    </div>
    <div style="float:right;">
        <div id="Div1" style="width: 100%; height: 100%; text-align:left; padding:20px;">
            <asp:Button ID="Button1" runat="server" Text="Zoom The Marker" OnClientClick="getInfo();return false;" />
        </div>
    </div>
</asp:Content>

The Output 

Before Zoom

After Zoom


By
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)

Popular posts from this blog

How to create zip file to download in JSP- Servlet

-
Image
Hye, my previous post show that how to download zip file in ASP.NET ,. In this tutorial i will show the same thing, but in Jsp-Servlet. Note : In this tutorial i will use this library :- JSTL 1.1  The JSP File  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <title>Download File As ZIP File</title>     </head>     <body>        <h1>Download File As ZIP File</h1>         ${DownloadMessage}         <br/>         <form action="<c:url value="/downloadFileServletZip" />" method="post" >             Default Path is server to download is D:\JAVA\dist\Output\             <input type="submit" name="bDownload"
Read more

How to create DataGrid or GridView in JSP - Servlet

-
Image
Hi there, today I will like to share my knowledge on creating basic Datagrid in JSP. This is my solution but not a permanent solution in all other cases. Maybe you can enhance this code to achieve your own objective. In this tutorial, I will use basic servlet and JSP. Note: In this tutorial, I will use this library:- MySQL JDBC Driver JSTL 1.1 the project will run on source JDK 7 This is the database table DROP TABLE IF EXISTS `blogtest`.`usersprofile`; CREATE TABLE  `blogtest`.`usersprofile` (   `userid` varchar(30) NOT NULL,   `firstName` varchar(45) NOT NULL,   `lastName` varchar(45) NOT NULL,   `emailAddress` varchar(45) NOT NULL,   PRIMARY KEY (`userid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `usersprofile` VALUES ('Ahmad','Ahmad','Ahmad','Ahmad@gmail.com'), ('Ahmad1','Ahmad1','Ahmad1','Ahmad1@gmail.com'), ('Ahmad10','Ahmad10','Ahmad10','Ahmad10@gmail.com'), ('Ahmad11&#
Read more

Pinging in ASP.NET Example

-
Image
This tutorial will show you how to ping a hostname/ip using the .NET System.Net class, ASP.NET 2.0 and C#.NET. The .NET Framework offers a number of types that makes accessing resources on the network easy to use. To perform a simple ping, we will need to use the System.Net, System.Net.Network.Information, System.Text namespaces. using System.Net; using System.Net.NetworkInformation; using System.Text; ASPX Page  <asp:ScriptManager ID="ScriptManager1" runat="server">     </asp:ScriptManager>     <asp:UpdatePanel ID="UpdatePanel1" runat="server">         <ContentTemplate>             <table width="600" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#cccccc">                 <tr>                     <td width="100" align="right" bgcolor="#eeeeee" class="header1">                         Ho
Read more