CODEWITHSUNDEEP
javascriptmysqlgoogle-maps
alsweet
alsweet

Reputation: 633

Styling a Google Map - Javascript

I have followed two different tutorials for my google map, one to run the map from a MySQL database, and another to style the map.

I'm having trouble combining the two of them, I haven't got much experience with javascript...

the code i have for the map working with the database is: you can see this map here

<!DOC

TYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Intern Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=myapikey" type="text/javascript"></script>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>


<script type="text/javascript">
//<![CDATA[

var iconStudent = new GIcon(); 
iconStudent.image = 'images/man.png';
iconStudent.shadow = 'images/man_shadow.png';
iconStudent.iconSize = new GSize(35, 60);
iconStudent.shadowSize = new GSize(60, 55);
iconStudent.iconAnchor = new GPoint(6, 30);
iconStudent.infoWindowAnchor = new GPoint(5, 1);

var iconAgency = new GIcon(); 
iconAgency.image = 'images/pin.png';
iconAgency.shadow = 'images/pin_shadow.png';
iconAgency.iconSize = new GSize(40, 40);
iconAgency.shadowSize = new GSize(60, 40);
iconAgency.iconAnchor = new GPoint(6, 20);
iconAgency.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["restaurant"] = iconStudent;
customIcons["bar"] = iconAgency;

function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(40, 0), 3);
   // map.setCenter(new GLatLng(47.614495, 0), 3);

    GDownloadUrl("marker.php", function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(point, name, address, type);
        map.addOverlay(marker);
      }
    });
  }
}

function createMarker(point, name, address, type) {
  var marker = new GMarker(point, customIcons[type]);
  var html = "<b>" + name + "</b> <br/>" + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}



    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map"></div>
  </body>

and then i have code working for the style i want: you can see this one here

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
    var latlng = new google.maps.LatLng(40,0);
    var myOptions = {
    zoom: 3,
    center: latlng,
    panControl: false,
    panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP 
    },
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
    },

    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    }
</script>

</head>
<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

can anybody help me combine the two, or point me in the right direction.

thanks in advance

alsweeet

Upvotes: 0

Views: 196

Answers (1)

Argiropoulos Stavros
Argiropoulos Stavros

Reputation: 9533

The first script is using the javascript api v2 and the second the javascript api v3. So it is not possible to combine the two.You should begin with basics and post here any further questions

Upvotes: 1

Related Questions