Google Maps JS API v3 - Simple Multiple Marker Example

random

Google Maps JS API v3 - Simple Multiple Marker Example

Google Maps API Multiple Markers with InfoWindows



In my previous post I explained How can I add a place in Google Map. Here in this post I will show you how to add multiple markers with info window in asp.net web application. Find the source code below:-
how to display,infowindow, multiple markers,api v3 google maps, Java Script,Aspnet, an Example
Placing multiple markers on a Google Map
Default.aspx

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Showing Multiple Markers on Google Map</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
    <script src="map.js" type="text/javascript"></script>
    <link href="UI.css" rel="stylesheet" type="text/css" />
</head>

<body onload="initialize();">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="up1" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <div>
                <asp:Button ID="btnClick" CssClass="css_btn_class" runat="server" Text="Show on Map"
                    OnClick="btnClick_Click" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Button ID="btnRemove" CssClass="css_btn_class" runat="server" Text="Remove"
                    OnClick="btnRemove_Click" />
            </div>
            <br />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <div id="map_canvas" style="width: auto; height: 550px;">
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Map.js
// Author: Etechpulse
// Summary: Show multiple markers on Google Map

    var map;
    var infoWindowOpenClose = { "infoWindowOpen": 1, "infoWindowClose": 2 }
    var isDraggableMarker = { "Yes": 1, "No": 2 }
    var isContentHeaderOrNot = { "Yes": 1, "No": 2 }
    var MarkerArray =[];  
   
    // Load Google Map
    function initialize() {
            var mapOptions = {
                zoom: 5,
                center: new google.maps.LatLng(22.754742017182636, 82.78772795999998),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
        }
     
      // Function to show data on map    
      function ShowOnMap(Name, Address, Latitude, Longitude) {
            // RemoveSearchMarker();
            var imgName = 'mm_20_green';
            var toolTiptext="Hey there!";
           
            var Content = '<b>Customer Details:</b><br><br>' +
                '<b>Name:</b>' + Name + '<br>' +
               '<b>Address:</b>' + Address + '<br>' +
               '<b>Latitude:</b>' + Latitude + '<br>' +
              '<b>Longitude:</b>' + Longitude + '<br>' + '<br>';
             
            var objImage = CreateImageObject(imgName, 24, 22, 10, 12);  //32,30,18,20 (For 32x32 Size)


            var objLatLng = CreateLatLngObject(Latitude, Longitude);
            var mapCustomer = AddMarkerOnMap(objImage, objLatLng, 24, 24, toolTiptext, Content, infoWindowOpenClose.infoWindowClose, isDraggableMarker.No, isContentHeaderOrNot.No);
        }
       
        // Create a image object       
        function CreateImageObject(ImageName, sizeX, sizeY, anchorX, anchorY) {
            var image = new google.maps.MarkerImage("images/" + ImageName + ".png",
            new google.maps.Size(sizeX, sizeY),         // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Point(0, 0),                // The origin for this image is 0,0.
            new google.maps.Point(anchorX, anchorY));   // The anchor for this image is the base of the flagpole at 0,32.
            return image;
        }
       
        // Create Lat/Lon object
        function CreateLatLngObject(Latitude, Longitude) {
            var latlng = new google.maps.LatLng(parseFloat(Latitude), parseFloat(Longitude));
            return latlng;
        }

        // Draw markers on map
        function AddMarkerOnMap(objImage, objLatLng, objsizeX, objsizeY, toolTiptext, infoWindowContent, infoWindowOpenClose, isDraggable, isContent) {
            var dragFlag = true;
           
            if (isDraggable == 2) dragFlag = false;
            var marker = new google.maps.Marker
                ({
                    position: objLatLng,
                    title: toolTiptext,
                    icon: objImage,
                    size: google.maps.Size(objsizeX, objsizeY),
                    draggable: dragFlag,
                    map: map
                });

            var ContentHeader = '';
            if (isContent == 1) {
            }
            else if (isContent == 2) {
                ContentHeader = infoWindowContent;
            }
            if (infoWindowOpenClose == 1) {
                if (infoWindow) infoWindow.close();
                infoWindow = new google.maps.InfoWindow({ content: ContentHeader, position: objLatLng, maxWidth: 200 });
                infoWindow.open(map, marker);
            }
            else if (infoWindowOpenClose == 2) {
                infoWindow = new google.maps.InfoWindow({ content: ContentHeader, position: objLatLng, maxWidth: 200 });
            }

            google.maps.event.addListener(marker, "click", function (event) {//            
                if (infoWindow) infoWindow.close();
                infoWindow = new google.maps.InfoWindow({ content: ContentHeader, position: marker.position, maxWidth: 200 });
                infoWindow.open(map, marker);
            });
           
            MarkerArray.push(marker);
            return marker;
        }         
       
        // Remove all markers from the map
        function RemoveMarkersFromArray() {          
                if (MarkerArray) {
                    for (var i = 0; i < MarkerArray.length; i++) {
                        MarkerArray[i].setMap(null);
                    }
                }          
            MarkerArray = new Array();
        }
     
        
Default.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Default : System.Web.UI.Page
{   
    protected void Page_Load(object sender, EventArgs e)
    {  
    }
    protected void btnClick_Click(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("EmpId", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Address", typeof(string));
        dt.Columns.Add("Latitude", typeof(string));
        dt.Columns.Add("Longitude", typeof(string));

        //
        // Here we add DataRows.
        //
        dt.Rows.Add(25, "Rk", "Sector-4 Gurgaon", "28.472917", "77.0224");
        dt.Rows.Add(50, "Sachin", "Noida", "28.569993", "77.323086");
        dt.Rows.Add(10, "John", "Vizag", "17.947381", "83.210449");
        dt.Rows.Add(21, "Aditya", "Meerut", "28.993671", "77.714345");
        dt.Rows.Add(100, "Mohan", "Banglore", "12.985322", "77.58266");

        if (dt.Rows.Count > 0)
        {
            for (int index = 0; index < dt.Rows.Count; index++)
            {               
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DrawMultipleMarkerSample" + index.ToString(), "ShowOnMap('" + Convert.ToString(dt.Rows[index]["Name"]) + "','" + Convert.ToString(dt.Rows[index]["Address"]) + "','" + Convert.ToString(dt.Rows[index]["Latitude"]) + "','" + Convert.ToString(dt.Rows[index]["Longitude"]) + "');", true);
            }
        }
    }

    // To Remove markers from map
    protected void btnRemove_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "RemoveMarkersFromArray", "RemoveMarkersFromArray();", true);
    }
}
Download Code 

I hope you will enjoy the development tips while programming with Google Maps JS API v3 in ASP.Net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. 

Also If you like this article, don't forget to share this article with your friends and colleagues.
Google Maps JS API v3 - Simple Multiple Marker Example Reviewed by Ravi Kumar on 5:26 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.