CODEWITHSUNDEEP
jquerygoogle-maps-api-3
Beginner
Beginner

Reputation: 29533

how to get google maps api v3 to show point?

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

Upvotes: 1

Views: 1259

Answers (2)

jwchang
jwchang

Reputation: 10864

Add this code below your code

var LatLng = new google.maps.LatLng($("#lat").val(), $("#long").val())
, Marker = new google.maps.Marker({ position: LatLng, map: map });

Upvotes: 0

T. Junghans
T. Junghans

Reputation: 11683

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>

Upvotes: 3

Related Questions