locked
working with google maps RRS feed

  • Question

  • User73272970 posted

    HI,
    I have a website where i need to track the product on the website there is a view button .
    whenever the user click view i want him to pop up the google map with the flow of product :
    eg : if the product have 4 entries of lat and long.
    33.043997,-96.835985
    32.882615,-96.764317
    32.882182,-97.039661
    27.976891,-82.533377

    when the user click View button a google map should pop up with above latitude and longitude.

    basically i have this code
    
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">  
    
    function initialize() {    
    
    var latlng = new google.maps.LatLng(33.043997,-96.835985);
    var latlng2 = new google.maps.LatLng(32.882615,-96.764317); 
    var latlng3 = new google.maps.LatLng(32.882182,-97.039661);
    var latlng4 = new google.maps.LatLng(27.976891,-82.533377);
       
    
    var myOptions = {      
    zoom: 12,      
    center: latlng,      
    //mapTypeId: google.maps.MapTypeId.ROADMAP 
    mapTypeId: google.maps.MapTypeId.TERRAIN  
    
    };    
    
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    
    var marker = new google.maps.Marker({
    
    ,
    map:map,
    title:"Stop 1, 9/29/2009 7:21:07 AM"
    
    });
    
    var marker = new google.maps.Marker({
    
    ,
    map:map,
    title:"Stop 2, 9/29/2009 7:30:40 AM"
    
    });
    
    var marker = new google.maps.Marker({
    
    ,
    map:map,
    title:"Stop 3, 9/30/2009 10:37:01 AM"
    
    });
    
    var marker = new google.maps.Marker({
    
    ,
    map:map,
    title:"Stop 4, 9/30/2009 11:37:01 PM"
    
    });
    
    var flightPlanCoordinates = [    
    	new google.maps.LatLng(33.043997,-96.835985),    
    	new google.maps.LatLng(33.045076,-96.832981),    
    	new google.maps.LatLng(33.04522,-96.829505),
    	new google.maps.LatLng(33.032772,-96.829247),
    new google.maps.LatLng(33.018956,-96.829033),
    new google.maps.LatLng(33.006504,-96.829033),
    new google.maps.LatLng(32.991531,-96.829033),
    new google.maps.LatLng(32.980588,-96.828518),
    new google.maps.LatLng(32.973388,-96.82148),
    new google.maps.LatLng(32.953224,-96.822166),
    new google.maps.LatLng(32.935505,-96.821823),
    new google.maps.LatLng(32.92297,-96.819592),
    new google.maps.LatLng(32.910145,-96.814442),
    new google.maps.LatLng(32.894579,-96.808949),
    new google.maps.LatLng(32.894579,-96.803627),
    new google.maps.LatLng(32.894579,-96.794014),
    new google.maps.LatLng(32.894435,-96.787148),
    new google.maps.LatLng(32.88766,-96.786633),
    new google.maps.LatLng(32.879731,-96.786289),
    new google.maps.LatLng(32.879731,-96.778221),
    new google.maps.LatLng(32.88002,-96.770153),
    new google.maps.LatLng(32.882615,-96.764317),
    new google.maps.LatLng(32.880308,-96.760883),
    new google.maps.LatLng(32.882615,-96.764317),
    new google.maps.LatLng(32.88002,-96.770153),
    new google.maps.LatLng(32.875983,-96.770153),
    new google.maps.LatLng(32.863151,-96.769981),
    new google.maps.LatLng(32.838924,-96.776848),
    new google.maps.LatLng(32.82046,-96.786804),
    new google.maps.LatLng(32.794201,-96.792641),
    new google.maps.LatLng(32.779481,-96.783371),
    new google.maps.LatLng(32.772842,-96.794701),
    new google.maps.LatLng(32.770244,-96.807404),
    new google.maps.LatLng(32.796222,-96.815643),
    new google.maps.LatLng(32.806322,-96.841393),
    new google.maps.LatLng(32.817287,-96.869202),
    new google.maps.LatLng(32.829981,-96.889801),
    new google.maps.LatLng(32.836616,-96.915207),
    new google.maps.LatLng(32.836328,-96.948509),
    new google.maps.LatLng(32.836039,-96.977005),
    new google.maps.LatLng(32.836328,-97.011337),
    new google.maps.LatLng(32.836328,-97.035713),
    new google.maps.LatLng(32.855653,-97.040176),
    new google.maps.LatLng(32.882182,-97.039661),
    new google.maps.LatLng(27.976891,-82.533377)
    
    
    
      
    ];  
    
    var flightPath = new google.maps.Polyline({
    	path: flightPlanCoordinates,
    	//strokeColor: "#013a81", 
    	strokeColor: "#FF0000",   
    	strokeOpacity: 1.0,    
    	strokeWeight: 2  
    });  
    
    flightPath.setMap(map);
    }
    
    </script>
    </head>
    <body onload="initialize()">  
    <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
    </html>
    

    I have this code when i run it as .html i get the result what i want .
    i want to convert this code to Vb.net . i hve hardcoded the latitude and longitude which i will read from database.

    Help please.


    Thursday, October 15, 2009 4:26 PM

Answers

  • User487807879 posted

    You've set width and height of the div as percentage - change that with some value in pixels, like this for example:

    <div id="map_canvas" style="width:400px; height:400px"></div>



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2009 2:29 PM

All replies

  • User487807879 posted

    You can use this code:
    Page:

    <head runat="server">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    </head>
    <body onload="initialize()">


    Code:

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                Dim scriptText As StringBuilder = New StringBuilder()
                scriptText.Append("function initialize() {")
                scriptText.Append("var latlng = new google.maps.LatLng(33.043997, -96.835985);")
                scriptText.Append("var latlng2 = new google.maps.LatLng(32.882615, -96.764317);")
                scriptText.Append("var latlng3 = new google.maps.LatLng(32.882182, -97.039661);")
                scriptText.Append("var latlng4 = new google.maps.LatLng(27.976891, -82.533377);")
                scriptText.Append("var myOptions = {")
                scriptText.Append("zoom: 12,")
                scriptText.Append("center: latlng,")
                scriptText.Append("mapTypeId:  google.maps.MapTypeId.TERRAIN")
                scriptText.Append("};")
                scriptText.Append("var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);")
                scriptText.Append("var marker = new google.maps.Marker({")
                scriptText.Append(",")
                scriptText.Append("map: map,")
                scriptText.Append("title: 'Stop 1, 9/29/2009 7:21:07 AM'")
                scriptText.Append("});")
                scriptText.Append("var marker = new google.maps.Marker({")
                scriptText.Append(",")
                scriptText.Append("map: map,")
                scriptText.Append("title: 'Stop 2, 9/29/2009 7:30:40 AM'")
                scriptText.Append("});")
                scriptText.Append("var marker = new google.maps.Marker({")
                scriptText.Append(",")
                scriptText.Append("map: map,")
                scriptText.Append("title: 'Stop 3, 9/30/2009 10:37:01 AM'")
                scriptText.Append("});")
                scriptText.Append("var marker = new google.maps.Marker({")
                scriptText.Append(",")
                scriptText.Append("map: map,")
                scriptText.Append("title: 'Stop 4, 9/30/2009 11:37:01 PM'")
                scriptText.Append("});")
                scriptText.Append("var flightPlanCoordinates = [")
                scriptText.Append("new google.maps.LatLng(33.043997, -96.835985),")
                scriptText.Append("new google.maps.LatLng(33.045076, -96.832981),")
                scriptText.Append("new google.maps.LatLng(33.04522, -96.829505),")
                scriptText.Append("new google.maps.LatLng(33.032772, -96.829247),")
                scriptText.Append("new google.maps.LatLng(33.018956, -96.829033),")
                scriptText.Append("new google.maps.LatLng(33.006504, -96.829033),")
                scriptText.Append("new google.maps.LatLng(32.991531, -96.829033),")
                scriptText.Append("new google.maps.LatLng(32.980588, -96.828518),")
                scriptText.Append("new google.maps.LatLng(32.973388, -96.82148),")
                scriptText.Append("new google.maps.LatLng(32.953224, -96.822166),")
                scriptText.Append("new google.maps.LatLng(32.935505, -96.821823),")
                scriptText.Append("new google.maps.LatLng(32.92297, -96.819592),")
                scriptText.Append("new google.maps.LatLng(32.910145, -96.814442),")
                scriptText.Append("new google.maps.LatLng(32.894579, -96.808949),")
                scriptText.Append("new google.maps.LatLng(32.894579, -96.803627),")
                scriptText.Append("new google.maps.LatLng(32.894579, -96.794014),")
                scriptText.Append("new google.maps.LatLng(32.894435, -96.787148),")
                scriptText.Append("new google.maps.LatLng(32.88766, -96.786633),")
                scriptText.Append("new google.maps.LatLng(32.879731, -96.786289),")
                scriptText.Append("new google.maps.LatLng(32.879731, -96.778221),")
                scriptText.Append("new google.maps.LatLng(32.88002, -96.770153),")
                scriptText.Append("new google.maps.LatLng(32.882615, -96.764317),")
                scriptText.Append("new google.maps.LatLng(32.880308, -96.760883),")
                scriptText.Append("new google.maps.LatLng(32.882615, -96.764317),")
                scriptText.Append("new google.maps.LatLng(32.88002, -96.770153),")
                scriptText.Append("new google.maps.LatLng(32.875983, -96.770153),")
                scriptText.Append("new google.maps.LatLng(32.863151, -96.769981),")
                scriptText.Append("new google.maps.LatLng(32.838924, -96.776848),")
                scriptText.Append("new google.maps.LatLng(32.82046, -96.786804),")
                scriptText.Append("new google.maps.LatLng(32.794201, -96.792641),")
                scriptText.Append("new google.maps.LatLng(32.779481, -96.783371),")
                scriptText.Append("new google.maps.LatLng(32.772842, -96.794701),")
                scriptText.Append("new google.maps.LatLng(32.770244, -96.807404),")
                scriptText.Append("new google.maps.LatLng(32.796222, -96.815643),")
                scriptText.Append("new google.maps.LatLng(32.806322, -96.841393),")
                scriptText.Append("new google.maps.LatLng(32.817287, -96.869202),")
                scriptText.Append("new google.maps.LatLng(32.829981, -96.889801),")
                scriptText.Append("new google.maps.LatLng(32.836616, -96.915207),")
                scriptText.Append("new google.maps.LatLng(32.836328, -96.948509),")
                scriptText.Append("new google.maps.LatLng(32.836039, -96.977005),")
                scriptText.Append("new google.maps.LatLng(32.836328, -97.011337),")
                scriptText.Append("new google.maps.LatLng(32.836328, -97.035713),")
                scriptText.Append("new google.maps.LatLng(32.855653, -97.040176),")
                scriptText.Append("new google.maps.LatLng(32.882182, -97.039661),")
                scriptText.Append("new google.maps.LatLng(27.976891, -82.533377)")
                scriptText.Append("];")
                scriptText.Append("var flightPath = new google.maps.Polyline({")
                scriptText.Append("path: flightPlanCoordinates,")
                scriptText.Append("strokeColor: '#FF0000',")
                scriptText.Append("strokeOpacity: 1.0,")
                scriptText.Append("strokeWeight: 2")
                scriptText.Append("});")
                scriptText.Append("flightPath.setMap(map);")
                scriptText.Append("}")
    
                Dim scriptInject As HtmlGenericControl = New HtmlGenericControl("script")
                scriptInject.Attributes.Add("type", "text/javascript")
                scriptInject.InnerHtml = scriptText.ToString()
                Page.Header.Controls.Add(scriptInject)
            End If
        End Sub


    But, you should consider using some of GoogleMap ASP.NET controls like this one: http://www.reimers.dk/

    Friday, October 16, 2009 5:10 AM
  • User73272970 posted

    Thanks for the reply,

     But i am using the above code and it does not display any map the page is blank.

    Can you please help me with this.

    Friday, October 16, 2009 5:00 PM
  • User487807879 posted

    I forgot to add div in which the map should be. So, use this in the page (code should remain the same):

    <head runat="server">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="width:400px; height:400px"></div>


     

    Saturday, October 17, 2009 12:52 PM
  • User73272970 posted

    i alredy have this line of code in .

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">  
    </script>
    </head>
    <body onload="initialize()">  
        <form id="form1" runat="server">
    <div id="map_canvas" style="width:100%; height:100%"></div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    </body>
    </html>

    aspx

    Monday, October 19, 2009 11:40 AM
  • User487807879 posted

    You've set width and height of the div as percentage - change that with some value in pixels, like this for example:

    <div id="map_canvas" style="width:400px; height:400px"></div>



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2009 2:29 PM
  • User73272970 posted

    hey what if in the above example i want to get all the latitude and longitude from the database.

    eg: select latitude, longitude from latlongtable where start   = '1'


    basically i want to replace the above lat long which is hardcoded to values from database.


    Regards



    Monday, October 19, 2009 2:45 PM
  • User487807879 posted

    Which one do you want to change - first 4 or all from "flightPlanCoordinates"?

    Thursday, October 22, 2009 2:14 AM