Click here to Skip to main content
11,718,589 members (82,530 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Google-Maps
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 22-Aug-12 23:06pm
074051.1K
Edited 22-Aug-12 23:07pm
Legor5.9K
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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
  Permalink  
Comments
Manas Bhardwaj at 23-Aug-12 5:45am
   
Good +5
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

<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>
  Permalink  

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 745
1 F-ES Sitecore 245
2 OriginalGriff 220
3 Jochen Arndt 160
4 Maciej Los 130
0 Sergey Alexandrovich Kryukov 1,679
1 OriginalGriff 610
2 Maciej Los 529
3 Richard MacCutchan 460
4 F-ES Sitecore 455


Advertise | Privacy | Mobile
Web03 | 2.8.150901.1 | Last Updated 12 Sep 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100