CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Talha Aslam
Talha Aslam

Reputation: 101

Add markers in google maps

Here is the code:

<div class="mgn-top-10">
                      <asp:Label ID="lbcontact" runat="server" ></asp:Label>



  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        window.onload = function () {
            var lat = document.getElementById('latitude').innerHTML;
            var lan = document.getElementById('longitude').innerHTML;
            var mapOptions = {
                center: new google.maps.LatLng(lat, lan),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            google.maps.event.addListener(map, 'click', function (e) {
                document.getElementById('latitude').innerHTML= e.latLng.lat();
                document.getElementById('longitude').innerHTML = e.latLng.lng();

            });

        }

 </script>

            <asp:Label ID="latitude" runat="server" ForeColor ="#f8f5f5" ></asp:Label>

               <asp:Label ID="longitude" runat="server" ForeColor ="#f8f5f5" ></asp:Label>

    <div id="dvMap" style="width: 700px; height: 300px">
    </div>   </div>

I have reused Google Maps code written in asp.net, I want to add a marker in map's, it's currently my university task.

Please help me out.

Google map's are already working perfectly but no marker's.

Thanks in advance

as suggested:

<script type="text/javascript">
        window.onload = function () {
            var lat = document.getElementById('latitude').innerHTML;
            var lan = document.getElementById('longitude').innerHTML;
            var mapOptions = {
                center: new google.maps.LatLng(lat, lan),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var myLatLng = {lat: -25.363, lng: 131.044};
            var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});
            google.maps.event.addListener(map, 'click', function (e) {
                document.getElementById('latitude').innerHTML= e.latLng.lat();
                document.getElementById('longitude').innerHTML = e.latLng.lng();

            });

        }

 </script>

Upvotes: 0

Views: 1109

Answers (1)

antonio
antonio

Reputation: 18242

From the documentation:

var myLatLng = {lat: -25.363, lng: 131.044};
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

The result using your edited code looks like this:

enter image description here

If you want to add markers when the user clicks the map you can do it like this:

google.maps.event.addListener(map, 'click', function (e) {
    document.getElementById('latitude').innerHTML= e.latLng.lat();
    document.getElementById('longitude').innerHTML = e.latLng.lng();
    var myLatLng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
});

Upvotes: 1

Related Questions