?
Solved

If I have a link with address and coordinate information tied to it can I populate a marker on google map?

Posted on 2014-10-09
5
Medium Priority
?
144 Views
Last Modified: 2014-10-09
I wanted to see how I can have separate list of links with possibly...

<script>
Google map general script which I have working...
</script>

<div id="map-canvas"></div>
<a href="#" data-address="my address" data-lat="latitude data" data-lng="longitude data">Whatever Link</a> to

The idea is to populate a marker on the map. I can't seem to find any examples of this out there.

Thx for any help!
0
Comment
Question by:brihol44
[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
  • 2
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40371225
populate a marker on the map

Do you mean, set, add, put, place a marker on the map?
0
 

Author Comment

by:brihol44
ID: 40371278
Yep! Thx!
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40371339
Test page : http://jsfiddle.net/kuxL5hux/

// GLOBAL VARIABLE
var map = null;

function initialize() {
    var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(16.1186017, -61.5229536),
          mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

window.onload = function() {
    document.getElementsByTagName("a")[0].onclick = function() {
        var isNotAlreadyAddedToTheMap = !this.getAttribute("data-done");
        if(isNotAlreadyAddedToTheMap) {
            var myLatlng = new google.maps.LatLng(this.getAttribute("data-lat"), this.getAttribute("data-lng"));
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: this.getAttribute("data-address")
            });
            this.setAttribute("data-done", true);
        }
    }
}

Open in new window

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40372229
Here is a good example at my personal website

http://www.javascriptjournal.com/gmaps/index.html

I think,  this will you give an idea who google map API works.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40372234
Feel free to look the code and reuse.
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 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