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
129 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
  • 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 500 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 28

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 28

Expert Comment

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

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

831 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