Home/ Questions/Q 7642787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:16:41+00:00

I am using Google Maps Api v3 to display a map. This is the

  • 0

I am using Google Maps Api v3 to display a map.

This is the JQuery:

<script type="text/javascript">
    var myOptions = {
         zoom: 8,
         center: new google.maps.LatLng($("#lat").val(), $("#long").val()),
          mapTypeId: google.maps.MapTypeId.HYBRID  
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

But the map doesn’t highlight the point. It just shows the area on the map…what I would like it to look like is this:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at the source code of this example with a marker:
    http://code.google.com/apis/maps/documentation/javascript/examples/infowindow-simple.html

    Example using your code:

        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        function initialize() {

            var myLatlng = new google.maps.LatLng($("#lat").val(), $("#long").val());
            //var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            var contentString = '<div id="content">Info window html</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Marker Title'
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        }

    </script>
</head>
<body onload="initialize()">
<div id="map" style="width: 400px; height: 300px;"></div>
</body>
    • 0