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);
}