[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Google maps marker not showing up

Posted on 2013-05-29
8
Medium Priority
?
671 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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 …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

649 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