asked on

Google maps marker not showing up

Hi Experts

I am working on Google map. i need to show a address on the google map with marker. when i click on the marker the address will show in a popup. i have found the script from google. but its not working. can you help me to solve? here i am giving the code

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Region code biasing (US)</title>
     <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
//var query = '<?php //echo $_GET["add"];?>';
var query = 'Manipal Hospital, Bangalore';
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
	//center: new google.maps.LatLng(12.970214,77.56029),
	//disableDefaultUI: true
	
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress();
  var marker = new google.maps.Marker({
      position: query,
      title:"Hello World!",
      visible: true
  });
  marker.setMap(map);
   
}

function codeAddress() {
  var address = query;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:70%; height:350px; margin:0 auto;"></div>
  </body>
</html>

Open in new window

Ahmed Hussein

HYG:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Region code biasing (US)</title>
     <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
//var query = '<?php //echo $_GET["add"];?>';
var query = 'Manipal Hospital, Bangalore';
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
	//center: new google.maps.LatLng(12.970214,77.56029),
	//disableDefaultUI: true
	
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress();
  var marker = new google.maps.Marker({
      position: query,
      title:"Hello World!",
      visible: true
  });
  marker.setMap(map);
}

function codeAddress() {
  var address = query;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
	      google.maps.event.addListener(marker, 'click', function(){
		      alert(query);
	      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:70%; height:350px; margin:0 auto;"></div>
  </body>
</html>

Open in new window

All i had to do is i added an event listener for the marker that listens to the marker click event, as you can see in here:

 google.maps.event.addListener(marker, 'click', function(){ alert(query); });

Open in new window

That's it all. change alert(query) with whatever you wanna alert to the user.

krushnac

ASKER

alert box is not required here. i need a default marker if i click on the mark.

ASKER CERTIFIED SOLUTION

Ahmed Hussein

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

krushnac

ASKER

excellent... one more help .... i want to show google map in thick box. but its not showing.

Ahmed Hussein

What do you mean by thick box ?

krushnac

ASKER

Its one kind of jquery pop up box. i want to show the map inside the pop if i click a display link.
http://thickbox.net/

Ahmed Hussein

Try this:

<a href="#TB_inline?height=155&width=300&inlineId=map-canvas&modal=true" class="thickbox">Show Map.</a>

Open in new window

and replace the map div with:

<div id="map-canvas" style="width:70%; height:350px; margin:0 auto; display:none;"></div>

Open in new window

~AG

krushnac

ASKER

excellent . Thanks a lot. Pls help me another point. i need to show another google direction map inside the popup. but i cant know how will i do. here is the code for google map with direction.

on 1st map there is display button if i click then a popup will open and it will show me the direction map.

i am working on hospital project. so user will see how much distance from his location to the hospital with directions. thats needs to show in the popup.

1st Map--------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Region code biasing (US)</title>
     <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript" src="thickbox/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="thickbox/thickbox.js"></script>
    <link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />
   <script>
var geocoder;
var map;
//var query = '<?php //echo $_GET["add"];?>';
var query = 'Manipal Hospital, Bangalore';
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
	//center: new google.maps.LatLng(12.970214,77.56029),
	//disableDefaultUI: true
	
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress();
  var marker = new google.maps.Marker({
      position: query,
      title:"Hello World!",
      visible: true
  });
  marker.setMap(map);
}

function codeAddress() {
  var address = query;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
	      google.maps.event.addListener(marker, 'click', function(){
		       infowindow = new google.maps.InfoWindow({
			    content: query
			   });
			   infowindow.open(map,marker);
	      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
    .Location{position:absolute;right:0;float:right;width:155px;margin:-277px 201px 0 0}
	.emap{float:right;background-color:#e0e0e0;border:1px solid #b0b0b0;padding:5px;margin:5px 0;box-shadow:0 5px 3px #b0b0b0; font:13px Arial, Helvetica, sans-serif;}
	.emap a {font:13px Arial, Helvetica, sans-serif; text-decoration:none;color: #1274C0;font-weight:bold;}
	.emap a:hover {color:#ff6c00}
	.jgre{background:#e0e0e0}
    </style>
  </head>
  <body>
    <div id="map-canvas" style="width:70%; height:350px; margin:0 auto; border:1px solid #ccc; margin-top:30px;"></div>
    <div class="Location">
		<div style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;" class="emap jgre">
			<a href="#TB_inline?height=500&width=800&inlineId=map-canvas" class="thickbox">View Directions from your location</a>
			<span class="em"></span>
		</div>
		</div>
        
</div>
  </body>
</html>

Open in new window

Google direction map-------------------------------

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Displaying text directions with <code>setPanel()</code></title>
   <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <style>
	#control {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    display: none;
    font-family: Arial;
    font-size: 14px;
    padding: 5px;
	
}
      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }


      @media print {
        #map-canvas {
          height: 300px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
		   font-family: Arial;
    font-size: 14px;
        }
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  
  var mapOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(12.970214,77.56029),
	disableDefaultUI: true
	
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="control">
      <strong>Start:</strong>
      <!--<select id="start" onchange="calcRoute();">
      <option value="BTM 2nd Stage">BTM 2nd Stage</option>
      <option value="Jayanagar 4th Block">Jayanagar 4th Block</option>
      <option value="Jayanagar 3th Block">Jayanagar 3th Block</option>
      <option value="Jayanagar 5th Block">Jayanagar 5th Block</option>
      </select>-->
      <input type="text" value="BTM 2nd Stage" id="start" readonly />
      <strong>End:</strong>
      <!--<select id="end" onchange="calcRoute();">
       <option value="BTM 2nd Stage">BTM 2nd Stage</option>
       <option value="Jayanagar 4th Block">Jayanagar 4th Block</option>
      <option value="Jayanagar 3th Block">Jayanagar 3th Block</option>
      <option value="Jayanagar 5th Block">Jayanagar 5th Block</option>
      </select>-->
      <input type="text" value="Jayanagar 4th Block" id="end" />
      <input type="button" onClick="calcRoute()" name="submit" value="submit">
    </div>
    <div style="width:70%; height:550px; margin:0 auto;">
    <div id="directions-panel" ></div>
    <div id="map-canvas" ></div>
    </div>
  </body>
</html>

Open in new window