Google Maps select bookmark

0

Good morning!

I'm working with the google maps API with ASP.NET C #.

I would like when the value of 'Name' is typed in a TextBox google maps zoomed in on the point and the icon changed to option 3 or changed the animation, something that identified that the element typed in the textbox is the even on google maps. I can do this by doing a query with parameters, but it is not ideal because if I do the other markers will disappear and this is not the goal.

<script type="text/javascript">
      var markers = [
          <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
              <ItemTemplate>
                  {
                      "title": '<%# Eval("Name") %>',
                                 "lat": '<%# Eval("Latitude") %>',
                                 "lng": '<%# Eval("Longitude") %>',
                                 "description": '<%# Eval("Description") %>',
                                 "rating": <%# Eval("Rating") %>

        }
</ItemTemplate>
                         <SeparatorTemplate>
                             ,
</SeparatorTemplate>
                     </asp:Repeater >
          <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:COEX_RPBConnectionString %>' SelectCommand="SELECT [Name], [Latitude], [Longitude], [Description], [Rating] FROM [View_correcoes_tratamento]"></asp:SqlDataSource >        
        ];
</script>








  <script type="text/javascript">
      window.onload = function () {
          var mapOptions = {
              center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };


          // declare an array to keep all google.maps.Marker instances in:




          var googleMarkers = [];


          var infoWindow = new google.maps.InfoWindow();

          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
          for (i = 0; i < markers.length; i++) {

              var data = markers[i]
              var myLatlng = new google.maps.LatLng(data.lat, data.lng);
              var iconName = data.rating == 1 ? "https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/32/MapMarker_Marker_Outside_Chartreuse.png" : data.rating == 2 ? "https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/32/MapMarker_Marker_Outside_Pink.png" : "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Ball-Azure.png";

              var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  icon: iconName,
                  title: data.title


              });



              // add the new marker to the googleMarkers array
              googleMarkers.push(marker);



              (function (marker, data) {
                  google.maps.event.addListener(marker, "click", function (e) {
                      infoWindow.setContent(data.description);
                      infoWindow.open(map, marker);
                  });
              })(marker, data);
          }





          // now all the markers have been created, make a new MarkerClusterer:
          var mcOptions = { gridSize: 50, maxZoom: 15, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' };
          var markerCluster = new MarkerClusterer(map, googleMarkers, mcOptions);

      }

    
asked by anonymous 17.03.2018 / 13:54

0 answers