?
Solved

Google maps marker not showing up

Posted on 2013-05-29
8
Medium Priority
?
669 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 4

Expert Comment

by:Ahmed Hussein
ID: 39207049
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
ID: 39207156
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 2000 total points
ID: 39207159
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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
LVL 1

Author Comment

by:krushnac
ID: 39207228
excellent... one more help .... i want to show google map in thick box. but its not showing.
0
 
LVL 4

Expert Comment

by:Ahmed Hussein
ID: 39207234
What do you mean by thick box ?
0
 
LVL 1

Author Comment

by:krushnac
ID: 39207243
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
ID: 39207272
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
ID: 39207439
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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

765 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