How To Give Static Message In Google Map Api

I am using google map API, it is working fine, like in this map if I click a marker, one dialogue box opens displaying the location address; instead of this I want to display a sta

Solution 1:

To change the InfoWindows you have to suppress the markers and add your own with the associated infowindow.

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

custom renderer for the markers:

var startLocation, endLocation, waypts;
functionRenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    waypts = [];
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    startLocation = newObject();
    endLocation = newObject();

    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      if (i == 0) {
        startLocation.latlng = legs[i].start_location;
        startLocation.address = legs[i].start_address;
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green", String.fromCharCode("A".charCodeAt(0)));
      } else {
        waypts[i] = newObject();
        waypts[i].latlng = legs[i].start_location;
        waypts[i].address = legs[i].start_address;
        waypts[i].marker = createMarker(legs[i].start_location, "waypoint" + i, legs[i].start_address, "yellow", String.fromCharCode("A".charCodeAt(0) + i));
      }
      endLocation.latlng = legs[i].end_location;
      endLocation.address = legs[i].end_address;
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k = 0; k < nextSegment.length; k++) {
          bounds.extend(nextSegment[k]);
        }
      }
    }

    endLocation.marker = createMarker(endLocation.latlng, "My Company", endLocation.address, "red", String.fromCharCode("A".charCodeAt(0) + waypts.length));
    google.maps.event.trigger(endLocation.marker, 'click');
  } elsealert(status);
}

proof of concept fiddle (based off of this example: http://www.geocodezip.com/v3_GoogleEx_directions-waypointsE.html)

code snippet:

var map;
var gmarkers = [];

functioninitMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 12.9577129,
      lng: 77.6764937
    } // Starting Point Marathahalli
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}
google.maps.event.addDomListener(window, 'load', initMap);

functioncalculateAndDisplayRoute(directionsService, directionsDisplay) {
  var selectedMode = document.getElementById('mode').value;
  /* configure waypoints */var waypts = [];
  waypts.push({
    location: {
      lat: 12.9583665,
      lng: 77.6635659
    }, // HALstopover: true
  }, {
    location: {
      lat: 12.9630167,
      lng: 77.6268656
    },
    stopover: true
  });

  directionsService.route({
    origin: {
      lat: 12.9577129,
      lng: 77.6764937
    }, // Haight.destination: {
      lat: 12.9868068,
      lng: 77.6070679
    }, // Ending Point Shivaji Nagar.travelMode: google.maps.TravelMode[selectedMode],
    waypoints: waypts
  }, function(response, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(response);
      RenderCustomDirections(response, status);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

functionRenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    waypts = [];
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    startLocation = newObject();
    endLocation = newObject();

    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      if (i == 0) {
        startLocation.latlng = legs[i].start_location;
        startLocation.address = legs[i].start_address;
        startLocation.marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green", String.fromCharCode("A".charCodeAt(0)));
      } else {
        waypts[i] = newObject();
        waypts[i].latlng = legs[i].start_location;
        waypts[i].address = legs[i].start_address;
        waypts[i].marker = createMarker(legs[i].start_location, "waypoint" + i, legs[i].start_address, "yellow", String.fromCharCode("A".charCodeAt(0) + i));
      }
      endLocation.latlng = legs[i].end_location;
      endLocation.address = legs[i].end_address;
      var steps = legs[i].steps;
      for (j = 0; j < steps.length; j++) {
        var nextSegment = steps[j].path;
        for (k = 0; k < nextSegment.length; k++) {
          bounds.extend(nextSegment[k]);
        }
      }
    }
    endLocation.marker = createMarker(endLocation.latlng, "My Company", endLocation.address, "red", String.fromCharCode("A".charCodeAt(0) + waypts.length));
    google.maps.event.trigger(endLocation.marker, 'click');
  } elsealert(status);
}

var icons = newArray();
icons["red"] = {
  url: "http://maps.google.com/mapfiles/ms/micons/red.png",
  // This marker is 32 pixels wide by 32 pixels tall.size: new google.maps.Size(32, 32),
  // The origin for this image is 0,0.origin: new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.anchor: new google.maps.Point(16, 32),
  labelOrigin: new google.maps.Point(16, 10)
};

functiongetMarkerImage(iconColor) {
  if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
    iconColor = "red";
  }
  if (!icons[iconColor]) {
    icons[iconColor] = {
      url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png",
      // This marker is 32 pixels wide by 32 pixels tall.size: new google.maps.Size(32, 32),
      // The origin for this image is 0,0.origin: new google.maps.Point(0, 0),
      // The anchor for this image is at 6,20.anchor: new google.maps.Point(16, 32),
      labelOrigin: new google.maps.Point(16, 10)
    };
  }
  return icons[iconColor];

}
// Marker sizes are expressed as a Size of X,Y// where the origin of the image (0,0) is located// in the top left of the image.// Origins, anchor positions and coordinates of the marker// increase in the X direction to the right and in// the Y direction down.var iconImage = {
  url: 'http://maps.google.com/mapfiles/ms/micons/red.png',
  // This marker is 20 pixels wide by 34 pixels tall.size: new google.maps.Size(20, 34),
  // The origin for this image is 0,0.origin: new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.anchor: new google.maps.Point(9, 34)
};
// Shapes define the clickable region of the icon.// The type defines an HTML &lt;area&gt; element 'poly' which// traces out a polygon as a series of X,Y points. The final// coordinate closes the poly by connecting to the first// coordinate.var iconShape = {
  coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
  type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

functioncreateMarker(latlng, title, html, color, label) {
  var contentString = '<b>' + title + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    draggable: true,
    map: map,
    icon: getMarkerImage(color),
    shape: iconShape,
    title: title,
    label: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = title;
  gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });

  return marker;
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script><title>Travel modes in directions</title><formid="testForm"><selectname="tripId"><optionvalue=""></option></select></form><divid="floating-panel"><b>Mode of Travel: </b><selectid="mode"><optionvalue="DRIVING">Driving</option></select></div><divid="map"></div>