Show text about google maps point

3

who helps me in the following: I have a project in which from winform I open the browser with the url of google maps specifying latitude and longitus, passing the parameters in the url (Example: " link "), everything works fine and shows it this way:

What I need is that I need a text to appear above the map point, something like "Direccion de Pepito Perez". Then the question will be How do I add text above the Google maps point? Note that this must be happening parameters in the url (as in the example latitude and longitude). Thanks.

    
asked by RSillerico 17.06.2016 в 23:48
source

2 answers

1

Here is your answer according to the google docs.
I do not hit the code because without specifying the google API, you would run it on OS and it would not work. Sign up in google maps to get your API, it's easy. ( link )

I leave you another option this is with the url of the Google API but without an api key.
I have taken the code of an SO response in English: link It is better to use the API Key it is safer for you to work in all browsers, without problems.

<!DOCTYPE html>
        <html>
          <head>
            <title>test sandbox 8</title>

            <style type="text/css">
              #main {
                margin: 60px 15px; 
              }
              #map { 
                min-height: 600px; 
                min-width: 800px; 
              }
            </style>

                <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
            <script>
              // code to draw map
              var map;
              var col = '#FF0000';
              var link ;
              var latLng;
              var polypoints;

              function initialize() {
    var locations_programs = [
       ['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', ''],    
       ['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', ''],    
       ['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', ''],    
       ['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', '']

    ];

    var markersArray = [];
    var markers = {};
    var mapOptions = {

        center: new google.maps.LatLng(45.4214, -75.6919),
        zoom: 10,
        scrollwheel: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_TOP
          },
        panControl: true,
            panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
          }
      };

      map = new google.maps.Map(document.getElementById('map'),
      mapOptions);


     //***  PROGRAMS

      var marker, i;
      var id = 'programs';

      for (i = 0; i < locations_programs.length; i++) {  
        var id = 'programs' + i;

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
          map: map
          ,id: id
          ,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
          ,url: locations_programs[i][5]
          ,zIndex:100
        });



          google.maps.event.addListener(marker, 'mouseover', function(event) {
              this.setIcon('http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png');
          });
          google.maps.event.addListener(marker, 'mouseout', function(event) {
              this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
          });



      }
    }
      google.maps.event.addDomListener(window, 'load', initialize); 
            </script>
          </head>
          <body>
                 <div id="map"></div>
           </body>
        </html>
    
answered by 20.07.2016 в 11:34
0

Using the url of google maps directly NO you can do what you indicate.

If you want to see everything that can be done without the API (which is what you are doing) you can look this answer that tells you all the parameters with which you can work.

    
answered by 20.06.2016 в 10:10