Google Maps javascript code-behind visual studio

I have this javascript code in C# file code-behind:

string markers = @"var address = '" + txtLocal.Text + @"'; geocoder.geocode( { 'address': address}, function(results, status) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, title: address, position: results[0].geometry.location });

});" ;

Literal1.Text = @" <script type='text/javascript'> function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);" + markers + @" } </script>";

I have this piece of code in the .aspx file:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBF-_RUuJxittvOu3E0SwutoD8LU3BZkPI"></script> <script src="http://code.jquery.com/jquery-2.1.4.min.js"type="text/javascript"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&sensor=false"></script> <script type="text/javascript"> $(function () { initialize(); }); </script> <asp:Literal ID="Literal1" runat="server"></asp:Literal> <div id="map_canvas" style="width: 500px; height: 300px" />

I made a few changes and now it's working.

-------------Problems Reply------------

I think you should use myMap in markers and not map-canvas eg:

@"map: myMap });";

First, in your code

geocoder.geocode( { 'address': " + txtLocal.Text + "}," +
@"map: map_canvas });";

@"map: map_canavas should say:

@"map: myMap

Or you can try adding this to your code too:

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=>>>>>YOUR_API_KEY<<<<<<">
</script>
</script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&sensor=false">

<script type="text/javascript">
$(function () {
initialize();
});
</script>

To get your Api Key try: https://developers.google.com/maps/documentation/javascript/tutorial

Category:javascript Views:3 Time:2019-02-28

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.148 (s). 11 q(s)