Google Map API - multiple icons in wrong spot

Asked
Active3 hr before
Viewed126 times

3 Answers

multiplegoogle
90%

MarkerWithLabel v1.1.10 stopped working for me recently after Google Maps Api's experimental version became v3.18. I had Maps API set to "...maps/api/js?v3&..." which by default picks latest experimental version (currently v3.18). By fixing the version to v3.17 MarkerWithLabel worked fine.,Making statements based on opinion; back them up with references or personal experience., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , When buying a property, is your agent's incentive contrary to yours?

Here is the string that is passed to the function

1344, 52.65665917, -2.49004717, '../Images/Icons/Direction/container_blueN.ico', 'Galahad', '2014 Mar 05 Wednesday, 14:00', 'Wellington Road, Horsehay, Hollybank', 'RESERVED', '0 KPH', 0
load more v
88%

The above code worked perfectly for one marker on a map, but not so much for multiple markers on one map. The internet saves the day again and I ended up at this Stack Overflow post with several robust answers on how to implement multiple markers in an embedded Google Maps. It primarily involves creating an array of locations, each with its respective location properties, then looping through the array and creating markers for each.,marker creates a new marker with properties position (location of the marker) and map (on which map to display the marker).,center represents a location object with a location’s latitude and longitude coordinates,I’ve modified the name/title property of each location to now include the name (Philz Coffee), the address, and a link tag “Get Directions” pointing to the short URL (handy because the long URL is, well, really long) of the location. To get a short URL, click on the location > Share > Share link and check the “Short URL” box.

index.html

<div id="map"></div>
<script type="text/javascript" src="scripts/index.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

index.js

function initMap() {
   var center = {
      lat: 41.8781,
      lng: -87.6298
   };
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: center
   });
   var marker = new google.maps.Marker({
      position: center,
      map: map
   });
}

index.css

#map {
   height: 400 px;width: 100 % ;background - color: grey;
}

The above code worked perfectly for one marker on a map, but not so much for multiple markers on one map. The internet saves the day again and I ended up at this Stack Overflow post with several robust answers on how to implement multiple markers in an embedded Google Maps. It primarily involves creating an array of locations, each with its respective location properties, then looping through the array and creating markers for each.

var locations = [
   ['Los Angeles', 34.052235, -118.243683],
   ['Santa Monica', 34.024212, -118.496475],
   ['Redondo Beach', 33.849182, -118.388405],
   ['Newport Beach', 33.628342, -117.927933],
   ['Long Beach', 33.770050, -118.193739]
];...
var infowindow = new google.maps.InfoWindow({});
var marker, count;
for (count = 0; count < locations.length; count++) {
   marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
   });
   google.maps.event.addListener(marker, 'click', (function(marker, count) {
      return function() {
         infowindow.setContent(locations[count][0]);
         infowindow.open(map, marker);
      }
   })(marker, count));
}

Great! I have a working map with five markers and info windows that pop up with content when the marker is clicked. Now it’s time to modify the content of the info window since I want users to be able to click on a link to get directions to the marker from an origin address. Let’s modify the location markers to point to specific addresses: five of the Philz Coffee locations in SoCal.

var locations = [ ['Philz Coffee<br>\ 801 S Hope St A, Los Angeles, CA 90017<br>\ <a href="https://goo.gl/maps/L8ETMBt7cRA2">Get Directions</a>', 34.046438, -118.259653], ['Philz Coffee<br>\ 525 Santa Monica Blvd, Santa Monica, CA 90401<br>\ <a href="https://goo.gl/maps/PY1abQhuW9C2">Get Directions</a>', 34.017951, -118.493567], ['Philz Coffee<br>\ 146 South Lake Avenue #106, At Shoppers Lane, Pasadena, CA 91101<br>\ <a href="https://goo.gl/maps/eUmyNuMyYNN2">Get Directions</a>', 34.143073, -118.132040], ['Philz Coffee<br>\ 21016 Pacific Coast Hwy, Huntington Beach, CA 92648<br>\ <a href="https://goo.gl/maps/Cp2TZoeGCXw">Get Directions</a>', 33.655199, -117.998640], ['Philz Coffee<br>\ 252 S Brand Blvd, Glendale, CA 91204<br>\ <a href="https://goo.gl/maps/WDr2ef3ccVz">Get Directions</a>', 34.142823, -118.254569] ];
load more v
72%

In my case, I just had to add that to the container around my img I was using as the marker. An explanation can be found here: #771 (comment), No suggested jump to results ,@EliranGooner It's worth a shot! The image that I'm using for my marker is small enough to not warrant resizing.,@JackZheng10 Thank you for the suggestion. After trying what you and people in the threads advised, I'm still not able to get the marker to stop floating. I tried multiple CSS suggestions, also tried to wrap this container around the component itself other instead of inside the component. Perhaps the only difference in my code is that I set the height and width of the image with a class using rem, without it the image is too big. Do you reckon I should edit the actual image to be small enough to fit in the map?

translateZ(0) translate(-50 % , -50 % )

Other "multiple-google" queries related to "Google Map API - multiple icons in wrong spot"