How to place dots or location markers on the map

Asked

Viewed 1,423 times

-3

How to position those "markers" on my map, passing longitude and latitude?

This is my HTML map script:

<div class="map-canvas" data-opt=' + ' {"txtLatitude":' +
this.Latitude + ',"txtLongitude":' + this.Longitude + '}' + '
style="display: block;width: 750px;height: 300px;"></div>

And Javascript:

var map;
$('[href*="#mapa-"]').click(function () {
    var $map = $('.map-canvas', $(this).attr('href'));
    map = new google.maps.Map($map.get(0), {
        zoom: 10,
        center: new google.maps.LatLng($map.data('opt').txtLatitude, $map.data('opt').txtLongitude)
    });
});

1 answer

3


According to the documentação in the Markers section.

The builder google.maps.Marker takes a single literal from the object Marker options that specifies the initial properties of the marker. The following fields are particularly important and commonly defined during marker construction.

  • position: (obligatory) specifies a Latlng that identifies the initial marker path.
  • map (optional): specifies the Map object on which the marker should be positioned.

In the builder Marker, you must specify the map on which the marker should be added. If you not specify this argument, the marker will be created, but will not be attached (or displayed) on the map. You can add the marker later by calling the method setMap() of the marker.

Example(taken from the documentation):

var myLatlng = new google.maps.LatLng(-19.212355602107472,-44.20234468749999);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Meu ponto personalizado"
  });

Browser other questions tagged

You are not signed in. Login or sign up in order to post.