Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-05-31
3
Medium Priority
?
2,280 Views
Last Modified: 2013-06-05
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
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
3 Comments
 
LVL 9

Expert Comment

by:TvMpt
ID: 39210284
Just check this demo
I think that is what you are looking for...

http://jsfiddle.net/kjy112/ZLuTg/
0
 
LVL 7

Expert Comment

by:Robert Saylor
ID: 39210402
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
 
LVL 15

Accepted Solution

by:
eemit earned 750 total points
ID: 39210423
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

730 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