Solved

Needing help with adding placemarker on google map

Posted on 2014-10-07
5
217 Views
Last Modified: 2014-11-01
I have some working code for 1 part of this project I'm working on but I also want to be able to add multiple markers on a map as well. I have included my working code but it doesn't seem to be working. I pieced it together from two working examples.

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">

   // global "map" variable
    var marker = null;
    var map = null;


    var infowindow = new google.maps.InfoWindow(
    {
      size: new google.maps.Size(150,50)
    });

    // A function to create the marker and set up the event window function
    function createMarker(latlng, name, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map,marker);
            });
        google.maps.event.trigger(marker, 'click');
        return marker;
    }

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(-33.8688, 151.2195),
        zoom: 13,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

      var input = /** @type {HTMLInputElement} */(
          document.getElementById('pac-input'));

      var types = document.getElementById('type-selector');
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.bindTo('bounds', map);

      var infowindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
      });

      google.maps.event.addListener(map, 'click', function(event) {
      //call function to create marker
             if (marker) {
                marker.setMap(null);
                marker = null;
             }

       marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
          return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setIcon(/** @type {google.maps.Icon} */({
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] && place.address_components[0].short_name || ''),
            (place.address_components[1] && place.address_components[1].short_name || ''),
            (place.address_components[2] && place.address_components[2].short_name || '')
          ].join(' ');
        }

        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow.open(map, marker);
      });

      // Sets a listener on a radio button to change the filter type on Places
      // Autocomplete.
      function setupClickListener(id, types) {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() {
          autocomplete.setTypes(types);
        });
      }

      google.maps.event.addListener(map, 'click', function(event) {
      //call function to create marker
         if (marker) {
            marker.setMap(null);
            marker = null;
         }
       marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
      });


      setupClickListener('changetype-all', []);
      setupClickListener('changetype-address', ['address']);
      setupClickListener('changetype-establishment', ['establishment']);
      setupClickListener('changetype-geocode', ['geocode']);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-address">
      <label for="changetype-address">Addresses</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</label>

      <button id="addAddress" type="button">ADD</button>
    </div>

    <div id="map-canvas" style="height: 500px;"></div>
  </body>

  <script>
  $( document ).ready(function() {


    $("#addAddress").click(function(){

      var address = $("#pac-input").val();

      alert(address);

    });

  });
  </script>

</html>

Open in new window

0
Comment
Question by:brihol44
[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
  • 3
  • 2
5 Comments
 
LVL 11

Expert Comment

by:Murfur
ID: 40367870
Just to clarify, do you have a preset list of  marker points or are you looking to search and add repeatedly?
0
 

Author Comment

by:brihol44
ID: 40368547
thx! I'm eventually wanting to save the dropped points so that if the page is reloaded it will output the same markers. I was just getting this worked out first.
0
 
LVL 11

Accepted Solution

by:
Murfur earned 500 total points
ID: 40368854
OK, but I'm still a little unclear on the logic. As I understand it so far:
- you want the user to search for an address and drop a pin after each search.
- you want to keeping pins from previous searched on the map as more are added.
- you want to save the array of dropped pins so that a pre-populated page of "my pins" can be loaded

So what is the significance of the radio buttons in the search box?
Is that you wanting the user to define the address type they have selected? If so, how does the ALL button apply?
0
 

Author Comment

by:brihol44
ID: 40369278
sorry for the lack of communication. The entire scope is this page is to serve two functions.

1. Searching for places and adding a marker/location to a list below the map when clicking a button "ADD LOCATION" inside the infowindow (info window being the little tooltip area above the marker when clicked if that wasn't clear).

2. Dropping a marker and having the same functionality with having a "ADD LOCATION" inside the info window.

Both functions would populate two separate lists after the user has clicked "ADD LOCATION" on each type of function above. And of course I would like to populate those markers eventually when the page is reloaded.

Thanks for the help again, I appreciate it. And I'm not suggesting that this entire scope be solved but I'm just trying to get the dropped markers to populate on the map first.
0
 

Author Closing Comment

by:brihol44
ID: 40417763
Figured it out on my own. Thx for trying.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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