Question

93

Multiple Markers on a Google Map

rated 0 times [ 95] [ 2] / answers: 1 / hits: 20058 / 16 Years ago, tue, march 3, 2009, 12:00:00

I added a google map with two markers (i am just testing), the code is:

function load() {



    var map = new GMap2(document.getElementById(map));





    var marker = new GMarker(new GLatLng(<%=coordinates%>));

    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));

    var html=<%=maptitle%><br/> +

         <%=text%>;

    var html2=<img src='simplemap_logo.jpg' width='20' height='20'/>  +

         <%=maptitle%><br/> +

         <%=text%> + Alper;

    map.setCenter(new GLatLng(<%=coordinates%>), 5);

    map.setMapType(G_HYBRID_MAP);

    map.addOverlay(marker);

    map.addOverlay(marker2);

    map.addControl(new GLargeMapControl());

    map.addControl(new GScaleControl());

    map.addControl(new GMapTypeControl());





    marker.openInfoWindowHtml(html);

    marker2.openInfoWindowHtml(html2);

    }

The problem is, only one markers text is showing (the white triangle with text inside it) the other is not visible, why?
Another thing, i have a table of Maps, its like: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, i can retrieve this table, but i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table, i know this is two much, but can anyone suggest or help me with the code? as i know nothing about javascript :D

The HTML OUTPUT is:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>



<html xmlns=http://www.w3.org/1999/xhtml>

<head><title>

    Untitled Page

</title>

    <script src=http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw

      type=text/javascript></script>



    <script type=text/javascript>



     function load() {



    var map = new GMap2(document.getElementById(map));





    var marker = new GMarker(new GLatLng(32.523251,35.816068));

    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));

    var html=maen<br/> +

          maen tamemi;

    var html2=<img src='simplemap_logo.jpg' width='20' height='20'/>  +

         maen<br/> +

          maen tamemi + Alper;

    map.setCenter(new GLatLng(32.523251,35.816068), 5);

    map.setMapType(G_HYBRID_MAP);

    map.addOverlay(marker);

    map.addOverlay(marker2);

    map.addControl(new GLargeMapControl());

    map.addControl(new GScaleControl());

    map.addControl(new GMapTypeControl());







    marker2.openInfoWindowHtml(html2);

    marker.openInfoWindowHtml(html);

    }



    //]]>

    </script>



    <script type=text/javascript>



      function pageLoad() {

      }



    </script>



</head>

<body onload = load()>

    <form name=form1 method=post action=Xhome.aspx id=form1>

<div>

<input type=hidden name=__VIEWSTATE id=__VIEWSTATE value=/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA== />

</div>



    <div id=map style=width:400px;height:300px >



    </div>

    </form>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zariahdiamondz

Add To Favorites

Follow

Total Points: 649

Total Questions: 109

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

zariahdiamondz questions

1 Get esbuild to watch for changes, rebuild, and restart express server

Wed, Jul 13, 22, 00:00, 2 Years ago

1 ethers js exits with this error=> invalid BigNumber value (argument=value, value=undefined, code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Thu, Nov 4, 21, 00:00, 3 Years ago

1 react-data-table-component: access the selected row and assign it to setState

Tue, Jun 15, 21, 00:00, 3 Years ago

1 An argument for 'id' was not provided. angular 11

Tue, Apr 20, 21, 00:00, 3 Years ago

1 How to open offcanvas from offcanvas

Thu, Apr 8, 21, 00:00, 3 Years ago

View All

answered 16 Years ago mackenzihannal · Accepted Answer

In response to the second part of your question:

i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table

I have (as an example - written a year or so ago) the following code:

In the code-behind I have something like this (c# I'm afraid):

[WebMethod]

public LatitudeLogitudeMessage[] GetPoints(string postCodes)

{

    string[] postCodeArray = postCodes.Split(,.ToCharArray());



    LatitudeLogitudeMessage[] pointArray = 

                   new LatitudeLogitudeMessage[postCodeArray.Length];

    int index = 0;

    foreach (string postCode in postCodeArray)

    {

        pointArray[index] = GetPoint(postCode);

        index++;

    }



    return pointArray;

}

LatitudeLogitudeMessage is a custom class that looks like this:

public class LatitudeLogitudeMessage

{

    public decimal? Latitude { get; set; }

    public decimal? Longitude { get; set; }

    public string Message { get; set; }

    public string Details { get; set; }

    public string Address { get; set; }



    public LatitudeLogitudeMessage(string addressToFind)

    {

        Address = addressToFind;

        Details = addressToFind.Replace(,, ,<br />);

    }

}

The GetPoint method bascially fills in those details.

In the code infront I then had:

PageMethods.GetPoints(address, showPoints);

Which calls the GetPoints method on the code behind, and passes the result to showPoints:

function showPoints(latLongs)

{

  GLog.write(Showing points);

  var points = [];

  var latLngBounds = new GLatLngBounds();



  for (var i = 0; i < latLongs.length; i++)

  {

    if ( == latLongs[i].Message)

    {

      points[i] = new GLatLng(latLongs[i].Latitude, latLongs[i].Longitude);

      var marker = 

            new GMarker(points[i], {title: latLongs[i].Details, clickable: false});

      map.addOverlay(marker);

      latLngBounds.extend(points[i]);

    }

    else

    {

      GLog.write(latLongs[i].Message);

    }

  }



  if (points.length > 1)

  {

    var bounds = new GBounds(points);

    var center = new GLatLng(

         (latLngBounds.getSouthWest().lat() 

           + latLngBounds.getNorthEast().lat()) /2.,

         (latLngBounds.getSouthWest().lng() 

           + latLngBounds.getNorthEast().lng()) /2.);

    var newZoom = map.getBoundsZoomLevel(latLngBounds, map.getSize());

    map.setCenter(center, newZoom);

  }

  else

  {

    map.setCenter(points[0], defaultZoomLevel);

  }

}

So this takes the array of points, and iterates over them creating a marker as it goes, centering on the first item in the list (not clever, but it worked for me).