Solved

Google maps marker not showing up

Posted on 2013-05-29
8
661 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 500 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Find out what you should include to make the best professional email signature for your organization.
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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