Solved

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

Posted on 2013-05-31
3
2,108 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 250 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

734 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