13

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);
          }

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? And how is it possible to store my own information pulled from a database on that marker?

Cœur
  • 37,241
  • 25
  • 195
  • 267
xiao
  • 1,718
  • 4
  • 23
  • 31
  • what do u mean by the second question? "how is it possible to store my own info pulled from a database on that marker" do u want to retrive lat lng from a DB and use it to plot marker? – KJYe.Name Mar 16 '11 at 00:04
  • Say the marker is on lat 40,-73 i want that marker to be clickable and when I click on it the information shown is something like recent weather information. – xiao Mar 16 '11 at 00:07
  • then you are looking for a marker with info window and also a weather API. – KJYe.Name Mar 16 '11 at 00:17
  • take a look at my provided answer. if you have any questions please let me know. there's also a jsfiddle demo attached that lets you play with the final codes on display. – KJYe.Name Mar 16 '11 at 00:55

1 Answers1

33

Here is a JSFiddle Demo that shows you how to set a google map marker by Lat Lng and also when click would give you an information window (bubble):

Here is our basic HTML with 3 hyperlinks when clicked adds a marker onto the map:

<div id="map_canvas"></div>

<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>

First we set 2 global variables. one for map and another an array to hold our markers:

var map;
var markers = [];

This is our initialize to create a google map:

function initialize() {
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

We then create 3 lat lng locations where we would like to place our markers: 

var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);

Here we create a function to add our markers based on whatever is passed onto it. myloc will be either usa, brasil or argentina and we then create the marker based on the passed param. With in the addMarker function we check and make sure we don't create duplicate marker on the map by calling the for loop and if we the passed param has already been created then we return out of the function and do nothing, else we create the marker and push it onto the global markers array. After the marker is created we then attach an info window with it's associated marker by doing markers[markers.length-1]['infowin'] markers.length-1 is just basically getting the newly pushed marker on the array. Within the info window we set the content using html. This is basically the information you put into the bubble or info window (it can be weather information which you can populate using a weather API and etc). After info window is attached we then attach an onclick event listener using the Google Map API's addListener and when the marker is clicked we want to open the info window that is associated with it by calling this['infowin'].open(map, this) where the map is our global map and this is the marker we are currently associating the onclick event with.

function addMarker(myloc) {
    var current;
    if (myloc == 'usa') current = usa;
    else if (myloc == 'brasil') current = brasil;
    else if (myloc == 'argentina') current = argentina;
    for (var i = 0; i < markers.length; i++)
    if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;

    markers.push(new google.maps.Marker({
        map: map,
        position: current,
        title: myloc
    }));

    markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
        content: '<div>This is a marker in ' + myloc + '</div>'
    });

    google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
        this['infowin'].open(map, this);
    });
}

When all is done we basically attach window.onload event and call the initialize function:

window.onload = initialize;
KJYe.Name
  • 16,969
  • 5
  • 48
  • 63
  • Hi The code in JS fiddle is not working.. Do we need to add any apart from the below lines... – user1046415 Jun 08 '16 at 19:24
  • Hello, i just clicked on this JSFiddle and it seems to be working still. However, with that being said, I believe Google Map API requires an API key now. Try and see if adding an API key work for you. It has been awhile since i've updated any of StackOverflow's answer. https://developers.google.com/maps/ – KJYe.Name Jun 08 '16 at 20:20