How to put speckles or location markers on the map

Question

How to put speckles or location markers on the map

Navigation

#1 by (3 votes)

-3

How do I 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 the 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)
    });
});

javascript

asked by anonymous 15.04.2014 / 19:46

1 answer

Does anyone know the Ionic framework? [closed] Load fields "hidden" by javascript

score 3 · Accepted Answer

According to documentação in the Bookmarks section.

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

position : ( mandatory ) specifies a LatLng that identifies the initial location of the bookmark.
map ( optional ): Specifies the Map object on which to place the marker.

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

Example ( removed from 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"
  });