Google Map İle Birden Fazla Harita Oluşturma ve Noktasal İsimlendirme

<%@ Page Title="" Language="C#" MasterPageFile="~/MainPage.master" AutoEventWireup="true" CodeFile="denemee.aspx.cs" Inherits="denemee" %>

<asp:Content ID="Content1" ContentPlaceHolderID="mainhead" Runat="Server">


<style type="text/css">
      #map{
          height:400px;
          width:100%;
      }
    </style>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div style="background-color:white" class="container">
    <h3>Google Haritam</h3>
     <div id="map">

     </div>
     <script>
         function initMap() {
             //Map Options
             var options = {
                 zoom: 8,
                 center:{lat:42.3601,lng:-71.0189}

             }
             // Yeni Harita
             var map = new google.maps.Map(document.getElementById('map'), options);
             //Listen for click on map
             //google.maps.event.addListener(map, 'click',
             //    function (event) {
             //        //Add Marker
             //        addMarker({ coords: event.latLng});

             //    });
             ////Add Marker
             //var marker = new google.maps.Marker({
             //    position: { lat: 42.4668, lng: -70.9495 },
             //    map: map,
             //    icon: 'http://www.caglayangrup.com.tr/images/favicon.ico'
             //});

             //var infoWindow = new google.maps.InfoWindow({
             //    content:'<h3>Nere La Burası</h3>'
             //});
             //marker.addListener('click', function () {
             //    infoWindow.open(map,marker);
             //});

             //Array of Makers
             var markers = [
                 {
                     coords: { lat: 42.4668, lng: -70.9495 },
                     iconImage: 'http://www.caglayangrup.com.tr/images/favicon.ico',
                     content: '<h3>1 Nere La Burası</h3>'
                 },
                 {
                     coords: { lat: 42.4668, lng: -71.9495 },
                     iconImage: 'http://www.caglayangrup.com.tr/images/favicon.ico',
                     content: '<h3>2 Nere La Burası</h3>'
                 },
                 {
                     coords: { lat: 42.7762, lng: -71.0773 }
                 }

             ];

             //Loop through makers
             for (var i = 0; i < markers.length; i++) {

                 //Add Marker
                 addMarker(markers[i])
             }


            
             //Add Marker Function
             function addMarker(props) {
                 var marker = new google.maps.Marker({
                     position:props.coords,
                     map: map,
                     //icon: props.iconImage
                 });

                 //Check For CustomIcon
                 if(props.iconImage){
                     // Set icon image
                     marker.setIcon(props.iconImage);

                 }
                 //Check Content
                 if(props.content){
                     var infoWindow = new google.maps.InfoWindow({
                         content:props.content
                     });
                     marker.addListener('click', function () {
                         infoWindow.open(map,marker);
                     });
                 }
             }
         }
     </script>
      <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCm_Sk7LHxyq6UPjVpTZac7ooMO1Qm43is&callback=initMap">
    </script>

 
 </div>
</asp:Content>







<%-- addMarker({
                 coords: { lat: 42.4668, lng: -70.9495 },
                 iconImage: 'http://www.caglayangrup.com.tr/images/favicon.ico',
                 content: '<h3>1 Nere La Burası</h3>'
             });
             addMarker({
                 coords: { lat: 42.8584, lng: -70.9300 },
                 content: '<h3>2 Nere La Burası</h3>'
             });
             addMarker({ coords:{lat: 42.7762, lng: -71.0773 }});--%>