Google Maps

winaje · February 24, 2007, 10:00:02 AM

Quote from: RoarinRow on February 18, 2007, 03:50:40 AM
Quote from: JCphotog on November 13, 2006, 08:03:40 PM
Have you guys run into http://www.frappr.com/ ? This might be an interesting twist..

That's what we use :up:

Hi Roarin, did you just copy the code from Frappr into a php article and activate it? If not, can you please give me an idea what I need to do to get the Frappr map to open in the main TP frame?

Thanks

Wantonio · May 03, 2007, 09:06:57 PM

Quote from: tick on February 18, 2007, 03:32:19 AM
I got the map to install fine but is there a way to make it start on the usa when i first load the page so I dont have to scroll and find it everytime. It currently loads in europe somewhere

Hi!
Okay, your posting is a long time ago, but I answer anyway.
Edit the coords and the zoom in this line: map.setCenter(new GLatLng(50.8,10.0), 5);
50.8 is the coordinate for the north-south-direction and 10.0 for the west-east-direction. 5 is the zoom-factor.

Greetz, Wan

P.S.: SOMEWHERE is Germany by the way ^^ What do you learn in school?

m771401 · June 19, 2007, 03:09:47 PM

Just thought I would post the code I use for an article.

I found this code from a link on www.mapki.com under faq sidebar section.
I modified it to make it work for me.

Demo

Code Select

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=2&key=your-key" type="text/javascript"></script>
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
</head>

<body onload="_OnLoad();">
    <table width="100%" border=0>
      <tr>
        <td width="32%" valign="top">
           <div id="side_bar"style=
            "MARGIN-TOP: 5px;
             MARGIN-LEFT: 5px;
             MARGIN-RIGHT: 5px;">
           </div><br>
           <div class="smalltext">
           clicking the above links will activate the info window
           </div><br>
           <div class="titlebg" style=
            "padding: 3px 3px 3px 3px;">
           Common Park Rules
           </div>
           <div style=
            "padding: 3px 3px 3px 3px;">
           &bull;&nbsp;Some info below the markers.<br><br>
           </div>
        </td>
        <td width="68%" valign="top">
           <div id="map" style=
            "MARGIN-TOP: 5px;
             MARGIN-LEFT: 5px;
             MARGIN-RIGHT: 5px;
             HEIGHT: 450px;">
           </div>
        </td>
      </tr>
    </table>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>

<script type="text/javascript">
//<![CDATA[
      if (GBrowserIsCompatible()) {

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var i = 0;
      var gmarkers = [];

      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "";

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        // use a custom icon with letter A - Z
        var letter = String.fromCharCode("A".charCodeAt(0) + i);
        var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
        myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif"
        myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif"
        var marker = new GMarker(point, {icon:myIcon});
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
        });

        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;

        // add a line to the side_bar html
        side_bar_html += '<b>'+letter+':</b> <a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

       function _OnLoad() {

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallZoomControl());
      map.addControl(new GMapTypeControl());

      // change coordinates to center map
      map.setCenter(new GLatLng(29.759609,-95.369568), 9);

      // This adds a marker to the map and link in info window
      var point = new GLatLng(30.17752,-95.46101);
      var marker = createMarker(point,"some-name-for-sidebar","<a href='some-link' target='_blank'><b>some-name</b></a><br>some-info")
      map.addOverlay(marker);

      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;

      }
      }

      else {
      alert("Sorry, the Google Maps API is not compatible with this browser");

      }

      //]]>
</script>
      </body>
   </html>

npereira · August 10, 2007, 03:20:20 PM

i'M trying to get this code snippet to work, although, what is the type of bloc to use?

I tried using HTML/BBC, SCRIPTBOX and nothing shows the map...?!?

norwegian · August 16, 2007, 11:55:10 AM

I have this one in a scriptbox showing in my left coloumn. I want to make a bigger map, and because of this I want to show the block in the middle. Is it possible to make a new site to put this block into? How do I do?

skip_mff · April 01, 2008, 06:09:08 PM

Can this be used to display satellite imagery as opposed to road maps? In the google maps site you can select Satellite so wondering if there is a way of implementing that a display as no road maps are available for my country.

Thanks

skip_mff · April 01, 2008, 08:17:50 PM

Found the code for this in case anyone is interested:

After

map.setCenter(new GLatLng(0.0,0.0), 7);

Add

map.setMapType(G_SATELLITE_MAP);

This will bring up the satellite view instead of the default Street names etc.

Other variables are:

map.setMapType(G_HYBRID_MAP);

Which brings up a mix of the two, quite useful if you let users scroll across to other area's which maybe don't have street info.

Or if you want users to be able to control it themselves instead of map.setMapType use this command instead of it

map.addControl(new GMapTypeControl());

However I found the above does not display well in a 170px wide panel.

This guide is very useful for anyone wishing to read further:

Tutorial Creating Your First Map Read From Section 4

Regards,

Skip

contra · August 30, 2008, 04:12:43 AM

m771401

i got the map tp work (with my code)
but how do i get it to allow people to mark their places?

Cornell · April 14, 2010, 07:20:59 AM

Anyone get this to work.

Recent

User

Stats

Members

Stats

Users Online

Google Maps

winaje

Wantonio

m771401

npereira

norwegian

skip_mff

skip_mff

contra

Cornell

This website is proudly hosted on Crocweb Cloud Website Hosting.