• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2643
  • Last Modified:

How to set google map marker by latitude and longitude and provide infomation bubble

Hi

The following sample code provided by google maps api
var geocoder;
          var map;
          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(40.77627, -73.910965);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }

Open in new window

the following only shows google map of the location without a marker. I was wondering how I can place a marker by giving latitude/longitude parameters?

Thanks in advance! any help is appreciated.
0
krushnac
Asked:
krushnac
1 Solution
 
TvMptCommented:
Just check this demo
I think that is what you are looking for...

http://jsfiddle.net/kjy112/ZLuTg/
0
 
Robert SaylorSenior DeveloperCommented:
I have this working on one of our internal webpages.

Note: I am passing longitude and latitude from our internal database. This might get you going from this example.

         
<iframe width=\"500\" height=\"350\" id=\"location\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"
         src=\"https://maps.google.com/maps?q=$row[latitude],+$row[longitude]&amp;hl=en&amp;ie=UTF8&amp;t=m&amp;z=14&amp;iwloc=A&amp;ll=$row[latitude],$row[longitude]&amp;output=embed\">
         </iframe>

Open in new window

0
 
eemitCommented:
Try to add this:
            //setup the red pin marker
            marker = new google.maps.Marker({
                map:map,
                position:latlng,
                draggable:false
            });

            contentString = 'Your Info Window Content';
            infoWindow = new google.maps.InfoWindow({
                content:contentString
            });

            infoWindow.open(map, marker);

Open in new window

below the line:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now