Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Google Maps using custom icons, multiple locations and directions

Posted on 2011-03-22
3
Medium Priority
?
759 Views
Last Modified: 2012-05-11
I have a page that will interface with the Google Map API.  I want to use custom icons and have multiple locations with the ability to get directions on the same page.  I have most of that working in the code.  The only issues with it are that the icon is squished  and there seems to be an issue with the zoom.  it is too close up and I am not sure how to change that when it loads.  I have cobbled together two different maps so I think it is an issue of one being placed on top of another but not certain.  

Oh and the initial bubble popups up in the right place but if you click on any of the other icons and come back to it it does not point to the right location.  This is the page:  http://www.monicaandrob.com/map3.php

You can see it load properly but then is overlayed by the other map.  Not sure where or how to get rid of it.

Let me know what you think and thanks!
<?PHP
session_start();
define("MAPKEY","ABQIAAAA01srpP0W_3AwfmiuNCZHuRS-obIY7qWB6yupu5rqkNAGrs4BXhRHAbVCEpxnj9ACh3Z-rcAK5j-taA");
$fromAddress=$toAddress='953 Eden Park Dr, Cincinnati, OH 45202';
$from=$_POST['fromAddress'];
if (isset($from) && $from>15)
	$fromAddress=$from;

$to=$_POST['toAddress'];
if (isset($to) && $to>15)
	$toAddress=$to;?>
<!DOCTYPE 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>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA01srpP0W_3AwfmiuNCZHuRS-obIY7qWB6yupu5rqkNAGrs4BXhRHAbVCEpxnj9ACh3Z-rcAK5j-taA"
      type="text/javascript"></script>

    <style type="text/css">
      table.directions th {
        background-color:#EEEEEE;
      }
      img {
        color: #000000;
      }

.button{
color: #ffffff;
font-size: 11px;
font-weight: bold;
background-color: #ac0000;
padding:10px;
}
   </style>
    <script type="text/javascript">
    //<![CDATA[

    var WINDOW_HTML = '<div style="width: 210px; padding-right: 10px">The wedding and reception will be held at<br />The Cincinnati Art Museum<br />953 Eden Park Dr<br />Cincinnati, OH 45202<br />Phone: (513) 721-2787<br /><a href="http://www.cincinnatiartmuseum.org">www.cincinnatiartmuseum.org<\/a><\/div>';
    var HOTEL1_HTML = '<div style="width: 210px; padding-right: 10px">Garfield Suites Hotel<br />2 Garfield Place<br />Cincinnati, OH 45202<br />Phone: (513) 421-3355<br /><a href="http://www.garfieldsuiteshotel.com">garfieldsuiteshotel.com<\/a><\/div>';
    var HOTEL2_HTML = '<div style="width: 210px; padding-right: 10px">The Cincinnatian Hotel<br />601 Vine Street<br />Cincinnati, Ohio 45202<br />Phone: (513) 381-3000<br /><a href="http://cincinnatianhotel.com">cincinnatianhotel.com¿<\/a><\/div>';
    var HOTEL3_HTML = '<div style="width: 210px; padding-right: 10px">Hyatt Regency Cincinnati<br />151 West Fifth Street<br />Cincinnati, OH 45202<br />Phone: (513) 579-1234<br /><a href="http://hyatt.com¿">hyatt.com¿<\/a><\/div>';


     function createMarker(point,html) {
        var icon = new GIcon(G_DEFAULT_ICON, "/images/hotel.png");
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

    function load()
    {
      if (GBrowserIsCompatible())
      {
        var map = new GMap2(document.getElementById("map"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "addoverlay", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);


        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(39.1147583,-84.4936302), 13);
        var marker = new GMarker(new GLatLng(39.1147583,-84.4936302));
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(WINDOW_HTML);
          });
        marker.openInfoWindowHtml(WINDOW_HTML);
//The Garfield Hotel
        var point = new GLatLng(39.10474,-84.51410);
        var html=HOTEL1_HTML;
        var marker = createMarker(point,html)
        map.addOverlay(marker);

//The Cincinnatian
        var point = new GLatLng(39.10262,-84.51338);
        var html=HOTEL2_HTML;
        var marker = createMarker(point,html)
        map.addOverlay(marker);


//The Hyatt Regency
        var point = new GLatLng(39.10078,-84.51578);
        var html=HOTEL3_HTML;
        var marker = createMarker(point,html)
        map.addOverlay(marker);

        map.addControl(new GLargeMapControl());
        setDirections("<?PHP echo $fromAddress;?>", "<?PHP echo $toAddress;?>", "en_US");
      }

    }

    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }


    function handleErrors(){
   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
     alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
     alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
     alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
     alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
     alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
   else alert("An unknown error occurred.");
    }

  function onGDirectionsLoad(){
   var poly = gdir.getPolyline();
   if (poly.getVertexCount() > 100) {
     return;
   }
   var baseUrl = "http://maps.google.com/staticmap?";

   var params = [];
   params.push("center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));

   var markersArray = [];
   markersArray.push(poly.getVertex(0).toUrlValue(5) + ",greena");
   markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) + ",greenb");

   params.push("markers=" + markersArray.join("|"));

   var polyParams = "rgba:0x0000FF80,weight:5|";
   var polyLatLngs = [];
   for (var j = 0; j < poly.getVertexCount(); j++) {
     polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));
   }
   params.push("path=" + polyParams + polyLatLngs.join("|"));
   var img = document.createElement("img");
   img.src = baseUrl + params.join("&") + "&key=<?PHP echo MAPKEY;?>";
   document.getElementById("staticMapIMG").innerHTML = "";
   document.getElementById("staticMapIMG").appendChild(img);

   document.getElementById("staticMapURL").innerHTML = baseUrl + params.join("&") + "&key=<?PHP echo MAPKEY;?>";
}
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">

    <div id="map" style="width: 750px; height: 700px"></div>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
<div class="titleArea">Scroll down to view map and formatted directions.</div>
<div class="titleText">From:</div>
<div class="inputField"><input type="text" size="65" id="fromAddress" name="from"
     value="<?PHP echo $fromAddress;?>"/></div>
<div class="titleText">To:</div>
<div class="inputField"><input type="text" size="65" id="toAddress" name="to"
     value="<?PHP echo $toAddress;?>" /></div><input type="hidden" name="locale" value="en" />

<div class="buttonArea"><input name="submit" type="submit" value="Get Directions"  class="button" id="button" />	</div>
</form>
    <table class="directions" width="675">
	<tr><th>Formatted Directions</th></tr>
	<tr>
        <td valign="top"><div id="directions" style="width: 675px;"></div></td>
	</tr>
    </table> 
  </body>
</html>

Open in new window

0
Comment
Question by:JGoyer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35198531
Wow, something is really weird there!  

If I understand your objectives, you want to draw a map that shows people how to get to a wedding reception.  Why not just use a static map and give them a link to Google so they can get directions for themselves?  There would be a lot less programming involved and most people can figure out how to put their current address into the Google Maps "from" box.

This article has a class that will help you draw a static map.  If you want to, you might draw two maps - one that is a higher-level and one that is localized.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html

HTH, ~Ray
0
 
LVL 2

Author Comment

by:JGoyer
ID: 35198737
That would work but they would still like the little bubbles with info over each location.  how can I add that into your code?
0
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 35198870
Not sure if you can do that with the static API.  You can create custom icons up to 64x64.  Maybe you could use those with a legend.  Man page here:
http://code.google.com/apis/maps/documentation/staticmaps/

You might also find something useful in the relevant Google forum:
http://groups.google.com/group/Google-Maps-API
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question