Click here to Skip to main content
15,742,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi..

I am having some addresses in my database.i need to point out them on google map and on mouseover on that marker, popup should be raised showing the details of that particular person. IS it possible with address or we should convert it to latitude and longitude?
i searched a lot but i didnt got what i needed...



Thanks in advance
Posted
Updated 22-Aug-12 23:07pm
v2

Yes, you need to convert the address to a GeoCode that you then use to place on the map. Google maps uses a LatLng [^] object to initialise marker objects on the map.

Further reading here...

https://developers.google.com/maps/documentation/javascript/geocoding[^]

So, the steps are

1) Convert you address into a GeoCode response by calling the maps API at http://maps.googleapis.com/maps/api/geocode/json[^]

2) Use the LatLng object to place the marker on your map (see the 'further information' link for examples of this

There are also numerous article on CodeProject on how to achieve what you need to do
 
Share this answer
 
Comments
Manas Bhardwaj 23-Aug-12 5:45am    
Good +5
XML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <style type="text/css">
#map_canvas {display:none;}
</style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyAZEI_aszTGmtGUTQP-yxu2DkHRZ9yvctg">
    </script>
 <%--   http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture--%>


<script type="text/javascript">
    var MarkerData = [{ "Name": "Penn Station", "Latitude": 40.75058, "Longitude": -73.99358, "LocationType": "Station" },
                { "Name": "Empire State Building", "Latitude": 40.748039, "Longitude": -73.985753, "LocationType": "Attraction" },
                { "Name": "Times Square", "Latitude": 40.756631, "Longitude": -73.988369, "LocationType": "Attraction" },
                { "Name": "Central Park", "Latitude": 40.770641, "Longitude": -73.974196, "LocationType": "Attraction" },
                { "Name": "Crowne Plaza Times Square", "Latitude": 40.760342, "Longitude": -73.98482, "LocationType": "Hotel" },
                { "Name": "Sheraton New York Hotel ", "Latitude": 40.739714, "Longitude": -73.989315, "LocationType": "Hotel"}]
    function displayMap()
    {
        document.getElementById('map_canvas').style.display = "block";
        initialize();
    }
    function initialize() {
        // create the map

        var myOptions =
         {
             zoom: 14,
             center: new google.maps.LatLng(40.756631, -73.988369),
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
        map = new google.maps.Map(document.getElementById("map_canvas"),
                                                myOptions);

        for (i = 0; i < MarkerData.length; i++) {
            var location = new google.maps.LatLng(MarkerData[i].Latitude, MarkerData[i].Longitude);
            var marker = new google.maps.Marker
                ({
                    position: location,
                    map: map
                });
            iconFile = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png ';
            marker.setIcon(iconFile)


            var title = 'Location : ' + MarkerData[i].Name;
            marker.setTitle(title);

            //attach message
            var msg = 'Location : ' + MarkerData[i].Name + '<br/> ';
            msg = msg + 'Location Type : ' + MarkerData[i].LocationType + '<br/> ';
            attachMessage(marker, msg);
        }
    }
    function attachMessage(marker, msg) {
        var infowindow = new google.maps.InfoWindow({
            content: msg,
            size: new google.maps.Size(120, 120)
        });
    }




</script>
</head>
<body onload="displayMap()">
   <div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
</body>
</html>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900