How to open a popup window when a marker is clicked from a route service?

UPDATE
when I click the green marker, it displays the location.can address can I change it?

LAST CHANGES:
Can a pop-up window click a marker from a route service?
or try another way, as soon as you hide the marker from the route service (green marker) and display only the red marker (hide only the green marker, not the route)? Is this a good way?

If this is not possible, suggest some alternative ideas.

OLDER:

I have a marker of two types on a google map. The red marker is a normal marker that represents location.and the green marker is a route marker (it represents a lot of waypoints on the map).
I am changing the infowindow with textbox.which is open on the red click mark.

In fact, I'm trying to do this, first I put some markers on a Google map, then draw a route between these markers. This is done. Immediately on the green marker, a single pop-up window appears in which the user enters a price, and then click the button. Then I got this value and saved it in the database.
The problem is this:

(1) ​​ ?
   , infowindow .
  ?

enter image description here

enter image description here

code is:

    <script type="text/javascript">
      var markerarray=new Array(); 
      //for way points
      var waypts=[];
      //array in json format for placing multiple marker
      var locations = <?php echo json_encode($lat1);?>;

      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: new google.maps.LatLng(23.0171240, 72.5330533),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var infowindow = new google.maps.InfoWindow();


    <!--  *************  for placing markers  ************  -->

      var marker, i;
      for (i = 0; i < locations.length; i++) 
      { 
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][3], locations[i][4]), 
        map: map  //enable if you want marker
      });

      //push value into way points
      waypts.push({
                  location:locations[i][0],
                  stopover:true
      });

      //create array for polyline
      markerarray[i] = marker.getPosition();//(Array(locations[i][5], locations[i][6]));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var data='<div style="height:150px !important"><table><tr><td>Enter Price</td></tr><tr><td><input type="text" name="prc" id="prc" /></td></tr></table></div>';
            infowindow.setContent(data);
            infowindow.open(map, marker);
         }
        })(marker, i));
      } 


    <!--  **************    for route between markers   *******************  -->

        var first=locations[locations.length-1][0];
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        //directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay = new google.maps.DirectionsRenderer({
            polylineOptions: {
              strokeColor: 'red',//"black",
              strokeOpacity: 1.0,
              strokeWeight: 3
            }
        });
        var start = locations[0][0];//"Bopal, Ahmedabad, Gujarat, India";
        var end = locations[locations.length-1][0];//"Nikol, Ahmedabad, Gujarat, India";

        //remove start destination from array
        waypts.shift();

        //remove end destination from array
        waypts.pop();

        var request = {
              origin:start,
              destination:end,
              waypoints:waypts,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
        });
        directionsDisplay.setMap(map);
    </script>

.

+4
2

, . , , . , , javascript-, , . infowindow. :

var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 //keep this in setInterval
  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}
//close here your set interval
google.maps.event.addDomListener(window, 'load', initialize);
+1

. , . .

var rendererOptions = {
    suppressMarkers : true      
}
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
0

All Articles