10

We use Google Map Api V3 to load google map in HTML container. We have a location search form. On submit, we will get the available locations and set markers in map. Once markers are loaded, on click on each marker we need to show Title, address details and design like what we have in google map. (In google maps - When clicking on red marker, we can see the more info overlay box with additional details like Stars, Directions, Search nearby, Save to Map, More..)

Do we have built in api function to load the overlay box like above. Or we don't have the function to load the details like what we have in google map currently.

When i searched in google and map docs, i can see options to show overlay window and write content inside the box. But i didn't see options to load the content as required.

I have pasted the code below for reference.

       var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

   function fnLoadMarkers(){
var locations  = [
    ['S Dakota', 43.834527,-103.564457, 1],
    ['Texas', 31.428663,-99.418947, 2],
    ['California', 36.668419,-120.249025, 3],
    ['Newyork', 43.197167,-76.743166, 4],
    ['Missouri', 38.410558,-92.73926, 5]
];
setMarkers(map,locations);
   }
 function setMarkers(map, locations) {
var image = 'images/marker.gif';

for (var i = 0; i < locations.length; i++) {
    var currLocation = locations[i];
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        title: currLocation[0],
        zIndex: currLocation[3]
    });
    google.maps.event.addListener(marker, 'click', function() {
        var latitude = this.position.lat();
        var longitude = this.position.lng();
        window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
    });
  }

}

If there is any hint on how to achieve these results, it will be helpful. Also, please guide, whether it is possible through Google API V3.

Thanks in Advance,

Regards

Srinivasan.C

2

1 Answer 1

23

I don't understand why are you opening a new window to Google Maps from a Google Maps API marker? You cannot add info window on Google Maps via URL.

This is how I do it.

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />  
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
  // Make position for center map 
  var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

  // Map options  
  var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
  }; 

  // Initiate map 
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  // Info window element 
  infowindow = new google.maps.InfoWindow(); 

  // Set pin 
  setPin(data); 
} 
// Show position 
function setPin(data) { 
  var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
  var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
  }); 

  // Listen for click event  
  google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
  }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
  // Create content  
  var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

  // Replace our Info Window's content and position 
  infowindow.setContent(contentString); 
  infowindow.setPosition(pin.position); 
  infowindow.open(map) 
} 
</script>  
</head>  
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
  <div id="map_canvas">  
</div>  
</body>  
</html> 
2
  • 2
    I think the OP is talking about the left sidebar which slides out when you click on a map pin on google maps. (ie maps.google.com does not use the infowindow)
    – James Cat
    Jan 16, 2017 at 15:52
  • very awesome mate! :) Oct 19, 2017 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.