SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help Customising Google Map API

    Hi guys,

    I really need a custom google map, something like http://www.zeemaps.com/ offers,

    Where you can:

    Add placemarkers to a map by clicking an add button
    A sidebar with all locations listed
    Info windows when you click on markers giving you information
    And a couple of other features!

    I would really appreciate some help, spent 3 days on this now and i have:

    Code:
    <!DOCTYPE html "-//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>Google Maps JavaScript API Example</title>
        <script src="http://maps.google.com/maps?
    
    file=api&amp;v=2.x&amp;key=ABQIAAAAWRAYgBXwUGsMlXv1A5Q4bBRI_5kORY0Qfu7GdhaM1xc6on2HoBT-8FUS12kkCbVXsWHjVsqeAyFq5Q&sensor=false"
                type="text/javascript"></script>
        <script type="text/javascript">
    
        function initialize() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(54.77534585936447, -2.5927734375), 6);
            map.setUIToDefault();
          }
    
    var publisher_id = 'ca-pub-4595198420871047';
    
    var adsManagerOptions = {
      maxAdsOnMap : 4,
      style: G_ADSMANAGER_STYLE_ADUNIT,
      // The channel field is optional - replace this field with a channel number 
      // for Google AdSense tracking
      //channel: 'your_channel_id'  
    };
    
    adsManager = new GAdsManager(map, publisher_id, adsManagerOptions);
    adsManager.enable();
    }
    
    
        </script>
    
      </head>
      <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 100%; height: 100%"></div>
      </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, so far any values recorded in my database are shown on the map:

    http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html

    Code:
    <!DOCTYPE html >
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>PHP/MySQL & Google Maps Example</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[
    
        var customIcons = {
          restaurant: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
    
        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.6145, -122.3418),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            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 google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
    
        //]]>
    
      </script>
    
      </head>
    
      <body onload="load()">
        <div id="map" style="width: 500px; height: 300px"></div>
      </body>
    
    </html>
    However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs:

    Code:
    <!DOCTYPE html >
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Map Simple</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        var marker;
        var infowindow;
    
        function initialize() {
          var latlng = new google.maps.LatLng(37.4419, -122.1419);
          var options = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById("map_canvas"), options);
          var html = "<table>" +
                     "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                     "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                     "<tr><td>Type:</td> <td><select id='type'>" +
                     "<option value='bar' SELECTED>bar</option>" +
                     "<option value='restaurant'>restaurant</option>" +
                     "</select> </td></tr>" +
                     "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
        infowindow = new google.maps.InfoWindow({
         content: html
        });
     
        google.maps.event.addListener(map, "click", function(event) {
            marker = new google.maps.Marker({
              position: event.latLng,
              map: map
            });
            google.maps.event.addListener(marker, "click", function() {
              infowindow.open(map, marker);
            });
        });
        }
    
        function saveData() {
          var name = escape(document.getElementById("name").value);
          var address = escape(document.getElementById("address").value);
          var type = document.getElementById("type").value;
          var latlng = marker.getPosition();
     
          var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                    "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
          downloadUrl(url, function(data, responseCode) {
            if (responseCode == 200 && data.length <= 1) {
              infowindow.close();
              document.getElementById("message").innerHTML = "Location added.";
            }
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
        </script>
      </head>
    
      <body style="margin:0px; padding:0px;" onload="initialize()">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <div id="message"></div>
      </body>
    
    </html>
    Help would be appreicated very much! I cannot combine the codes to save my life...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •