SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Google Map API

  1. #1
    SitePoint Addict Banana Man's Avatar
    Join Date
    Dec 2005
    Posts
    391
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Google Map API

    Hi,

    I'm a fairly basic level with php and have no experience with Javascript so am having a bit of a problem with something i want to do with Google Map API and was wondering if anyone could take a quick look. I have it setup 90% now how i need it. I have set it up so that users can select their location on the Map by clicking and every time they click a marker is placed and the previous marker they placed is removed. This LatLng location is then inserted into a textfield which i use in my php script to add to my database. However, when this has all been done a need a new script for when a user wants to edit their Map location that they stored previously. I want to take their existing LatLng location from my database and place a corresponding marker on the Map but then also allow them to click somewhere else on the Map which will remove the initial marker and also place the new LatLng into my textfield. Here is my code so far which doesnt yet deal with the Editing problem:

    PHP Code:
    <script>

    // checks if the user provided all the data for adding a new location
    function check()
    {
        if (
    document.getElementById('lat').value == "" || document.getElementById('long').value == "" || document.getElementById('address').value == "")
        {
            
    alert("Click on the map to choose location!");
            return 
    false;
        }

        return 
    true;
    }

    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
    //Source Code from http://www.1stwebdesigner.com/tutorials/interactive-travel-map-google-maps-api/
        var geocoder;
        var map;
        
        // initializing the map
        function initialize()
        {
            // define map center
            var latlng = new google.maps.LatLng(53.380052,-6.998291);
            // define map options
            var myOptions = 
            {
                zoom: 7,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                }
            };
            
            // initialize map
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            // add event listener for when a user clicks on the map
            google.maps.event.addListener(map, 'click', function(event) {
                findAddress(event.latLng);
                placeMarker(event.latLng);document.write(latLng)
            });
        }
        
        //Add a marker to the map where the user clicks.  Only display 1 marker at a time
        var marker;

        function placeMarker(location) {
              if ( marker ) {
            marker.setPosition(location);
              } else {
        marker = new google.maps.Marker({
          position: location,
          map: map
            });
          }
        }

    // finds the address for the given location
        function findAddress(loc)
        {
            geocoder = new google.maps.Geocoder(); 
            
            if (geocoder) 
            {
                geocoder.geocode({'latLng': loc}, function(results, status) 
                {
                    if (status == google.maps.GeocoderStatus.OK) 
                    {
                        if (results[0]) 
                        {
                            address = results[0].formatted_address;
                            
                            // fill in the results in the form
                            document.getElementById('lat').value = loc.lat();
                            document.getElementById('long').value = loc.lng();
                            document.getElementById('address').value = address;
                        }
                    } 
                    else 
                    {
                        alert("Geocoder failed due to: " + status);
                    }
                });
            }
        }
    </script> 
    Anyone know how to get it setup this way?

    Thanks!

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,033
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    You need to put the marker in there with PHP. I would to that somewhere in the initialize function after the map has been created. Assume you have $lat and $lang available, you'd do something like

    PHP Code:
    <script>
    // ...
    function initialize()
    {
    // map = etc
    <?php
    if ($lat != '' && $lang != ''): 
    marker = new google.maps.Marker({
      
    position: new google.maps.LatLng(<?php echo $lat?><?php echo $lang?>),
      map: map
    });

    <?php endif; ?>
    // ...
    }
    // ...
    <script>
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


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
  •