All geek questions in one place

How to show a white popup on a custom Google map?

Currently, I have an array of places for a custom map I'm working on. I tried, but cannot figure out how to add a 'click' popup above the marker. I want the name to be displayed in the white box and it has the option so that the person can choose "get directions here." Does anyone know how I can achieve this with more than one marker?

<!DOCTYPE html>
<head>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 50% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  var map;
  var marker
  function initialize() {
    var latlng = new google.maps.LatLng(42.098687,-75.917974);
 var restaurants = new Array();
 restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
    var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
   var i = 0; 
 for ( i <0; i < restaurants.length;i++ ){
  var marker = new google.maps.Marker({
        position: restaurants[i],
     map:map,
        title:"Testing!"
    });
  popupDirections(marker);
  }
}
function popupDirections(marker) {
  var infowindow = new google.maps.InfoWindow(
      { content: "tests: "
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
+3
source share
2 answers

The popup you are talking about is called the google map language info window.

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});

click . -.

, .

+3

- infowindow, , , infowindow , setContent. , Google api. , ,

:

<script type="text/javascript">
var map;
var marker;
var infowindow;   //Global infowindow created
function initialize() {
  var latlng = new google.maps.LatLng(42.098687,-75.917974);
  var restaurants = new Array();
  restaurants = [ 
         new google.maps.LatLng(42.898687,-75.917974),
         new google.maps.LatLng(42.698687,-73.917974),
         new google.maps.LatLng(42.198687,-75.917974),
         new google.maps.LatLng(41.098687,-75.917974)
         ];
   var myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    infowindow = new google.maps.InfoWindow({   //infowindow options set
               maxWidth: 355  
    });

    var i = 0; 
    for ( i <0; i < restaurants.length;i++ ){
           marker = new google.maps.Marker({
                      position: restaurants[i],
                      map:map,
                      title:"Testing!"
               });
            popupDirections(marker);
       }
}

function popupDirections(marker) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
</script>

(, , ), popupDirections(), "html":

function popupDirections(marker, html) {
  //this function created listener listens for click on a marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
    infowindow.open(map,marker); //then opens the infowindow at the marker
  });
}
+1

Source: https://habr.com/ru/post/1764104/

More articles:


All Articles