How to add descrption window to markers in google maps

Question

0.00/5 (No votes)

See more:

, +

Hello
I am a very new person to the google maps and javascript. What i am trying to achieve is that when i load a google map the user should be able to add a marker/pin on any location he wishes via click. I am able to do this now what i am trying to add is that if a user clicks the pin gets added there should also be a description window which user could add on that pin. Say when i click on a location to add a pin i should also be able to insert some description like "my home" etc.Below is my code so far. Thanks anyways

JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Accessing arguments in UI events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882,131.044922)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
}

function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Posted 2-Mar-14 19:22pm

loraloper_22

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

KumarSundeep · Answer 1 · 2014-03-02T20:07:00

Solution 1

To add description on your markers in google map refer:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple[^]

Hope you'll find your solution!!!

Posted 2-Mar-14 20:07pm

KumarSundeep

Comments

loraloper_22 3-Mar-14 2:20am

HiI have seen this before. Thanks for the reply the problem is that i want a info window to pop up when user has inserted a pin and then allow user to add a description in the example(link)it already contains data sort of a hardcoded where as i want user to enter it.

KumarSundeep · Answer 2 · 2014-03-02T22:01:00

You can try this for popup on google marker:

XML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>



      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">


  <style type='text/css'>
    #map_canvas{width:400px;height:400px;}
  </style>



<script type='text/javascript'>//<![CDATA[
$(function(){
function initialize() {
        var mapOptions = {
          zoom: 15,
          panControl: false,
          mapTypeControl: false,
          center: new google.maps.LatLng(41.89924, -87.62756),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

        var image = 'http://maps.google.com/mapfiles/kml/pal2/icon2.png';
        var myLatLng = new google.maps.LatLng(41.89924, -87.62756);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: image,
        });

        var styles = [
                  {
                    stylers: [
                      { hue: "#ff9f67" },
                      { saturation: -20 },
                      { gamma: 1.50 }
                    ]
                  },{
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [
                      { lightness: 100 },
                      { visibility: "simplified" }
                    ]
                  },{
                    featureType: "road",
                    elementType: "labels.text.stroke",
                    stylers: [
                      { visibility: "off" }
                    ]
                  },

                  {
                    featureType: "water",
                    elementType: "geometry.fill",
                    stylers: [
                        { visibility: "on" },
                        { color: "#ffa066" },
                        { lightness: 80 }
                    ]
                    }
                ];
    map.setOptions({styles: styles});

    // Code for jQuery dialog as infowindow
    var popup=$('<div/>', {
        'id':'infoWindow',
        'text':'Hello World'
    }).dialog({
        'autoOpen':false,
        'width': 200,
        'height':200,
        'resizable':false,
        'modal':true,
        'title':'Map info'
    });
    google.maps.event.addListener(marker, 'click', function(e) {
        console.log(e);
        popup.dialog('open');
    });
}
initialize();

});//]]>

</script>


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

</body>


</html>