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

82,088

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;
Share:
82,088

Related videos on Youtube

xiao
Author by

xiao

Updated on July 09, 2022

Comments

  • xiao
    xiao over 1 year

    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?

  • user1046415
    user1046415 almost 8 years
    Hi The code in JS fiddle is not working.. Do we need to add any apart from the below lines... <script src="maps.googleapis.com/maps/api/js?v=3.exp"></script> <script src="code.jquery.com/jquery-1.11.1.min.js"></script>
  • KJYe.Name
    KJYe.Name almost 8 years
    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. developers.google.com/maps

Related