Google Map Marker for addresses

Question

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 22-Aug-12 23:06pm

07405

Updated 22-Aug-12 23:07pm

Legor

v2

Add a Solution

2 solutions

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

Posted 22-Aug-12 23:37pm

Dylan Morley

Comments

Manas Bhardwaj 23-Aug-12 5:45am

Good +5

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)

07405 · Accepted Answer · 2012-09-11T23:32:00

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>