Solved

Google maps marker not showing up

Posted on 2013-05-29
8
643 Views
Last Modified: 2013-05-30
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

0
Comment
Question by:krushnac
  • 4
  • 4
8 Comments
 
LVL 4

Expert Comment

by:Ahmed Hussein
Comment Utility
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.
0
 
LVL 1

Author Comment

by:krushnac
Comment Utility
alert box is not required here. i need a default marker if i click on the mark.
0
 
LVL 4

Accepted Solution

by:
Ahmed Hussein earned 500 total points
Comment Utility
You Mean like this?:

<!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(){
		       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>
  </head>
  <body>
    <div id="map-canvas" style="width:70%; height:350px; margin:0 auto;"></div>
  </body>
</html>

Open in new window


~AG
0
 
LVL 1

Author Comment

by:krushnac
Comment Utility
excellent... one more help .... i want to show google map in thick box. but its not showing.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 4

Expert Comment

by:Ahmed Hussein
Comment Utility
What do you mean by thick box ?
0
 
LVL 1

Author Comment

by:krushnac
Comment Utility
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/
0
 
LVL 4

Expert Comment

by:Ahmed Hussein
Comment Utility
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
0
 
LVL 1

Author Comment

by:krushnac
Comment Utility
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

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now