简体   繁体   中英

Google Maps: add hardcoded Marker to loop

I am using jquery/Javascript to loop through markers and their info which is stored in a database. However, I want a default marker on the map in addition to these markers because this one is very different (fewer columns) so I am not sure how to extend the existing logic to also include the hardcoded marker. Basically, the additional marker should look like this (which so far did not work, the marker does not show up):

additional marker:

 var myLatLng = {lat: -25.363, lng: 131.044};

 var additionalmarker = new google.maps.Marker({
    position: myLatLng,
    map: lmap,
    title: 'Additional Marker!'
  });

complete code (without additional marker):

itstar.apex.plugins.googleMap.displayMap = function(pItemID, pParameter) {
  var lParameter = apex.jQuery.extend({
                      map_width: 640,
                      map_height: 480,
                      map_zoom: 12,
                      map_id: pItemID + "_MAP",
                      map_locations: "",
                      marker_icon: "",
                      map_type: "ROAD"
                      }, pParameter);



  if (!lParameter.map_locations) {
    return;
  }

  /* Convert the JSON String into an Object */  
  var oLocations = JSON.parse(lParameter.map_locations);

  /* Check the all parameters to get the options for the map */
  /* 1. the JSON String must contain the 2 objects "base" and "marker" */
  if (Object.keys(oLocations.gps).length != 2) {
    alert("GPS-JSON Object not valid ");
    return;
  }

  /* 2. get the base coordinates to center the map to the point given in the parameter lParameter.base_location  */
  var lBaseLat = oLocations.gps[0].base[0].lat;
  var lBaseLng = oLocations.gps[0].base[0].lng;
  var lBaseLatLng = new google.maps.LatLng(lBaseLat, lBaseLng);

  /* 3. if there is an individuell zoom factor within the JSON string, use it */
  var lZoom = oLocations.gps[0].base[0].zoom;
  /* if not, use the zoom parameter */
  if (!lZoom) {
    lZoom = lParameter.map_zoom;
  }

  /* 4. check for individuell map type */
  var lMapType = oLocations.gps[0].base[0].type;
  if (!lMapType) {
    lMapType = lParameter.map_type;
  }
  switch (lMapType) {
    case "ROAD":
      var cMapType = google.maps.MapTypeId.ROADMAP;
      break;
    case "HYBRID":
      var cMapType = google.maps.MapTypeId.HYBRID;
      break;
    case "SATELLITE":
      var cMapType = google.maps.MapTypeId.SATELLITE;
      break;
    case "TERRAIN":
      var cMapType = google.maps.MapTypeId.TERRAIN;
      break;
    default:
      var cMapType = google.maps.MapTypeId.ROADMAP;
      break;
  }


  /* Display the map */  
  var lMapOptions = {
    zoom: lZoom,

  /*  center: lBaseLatLng,*/
    mapTypeId: cMapType
  }


  var lMap = new google.maps.Map(
    document.getElementById(lParameter.map_id),
       lMapOptions
  );
 lMap.setCenter(new google.maps.LatLng(38.850033, -95.6500523));

  /* put the markers */
  var lMarkerCount = Object.keys(oLocations.gps[1].marker).length;

  var infowindow = new google.maps.InfoWindow();


  for (var i=0; i<lMarkerCount; i++) {
    var oMarkerLocation = oLocations.gps[1].marker[i];
    var lLat = oMarkerLocation.lat;
    var lLng = oMarkerLocation.lng;

    /* new Marker Position */
    var lMarker = new google.maps.Marker({
        position: new google.maps.LatLng(lLat, lLng),
        animation: google.maps.Animation.DROP,
        map: lMap
      });


    /* check custom Marker Image in GPS Data*/
    var lGpsImg = oMarkerLocation.img;
    var lParImg = lParameter.marker_icon;

    if (lGpsImg && lGpsImg.length != 0) {
       var lMarkerImage = new google.maps.MarkerImage(lGpsImg);
    } 
    else {
       /* no custom image in GPS data but maybe in the parameters? */
       if (lParImg && lParImg.length != 0) {
          var lMarkerImage = new google.maps.MarkerImage(lParImg);
        } else {
          lMarkerImage = "";
        }
    }
    if (lMarkerImage && lMarkerImage.length != 0) {
       lMarker.setIcon(lMarkerImage);
    }

    google.maps.event.addListener(lMarker, 'click', (function(lMarker, i) {
        return function() {
          infowindow.setContent(oLocations.gps[1].marker[i].name);
          infowindow.open(lMap, lMarker);
        }
      })(lMarker, i));

  }
} 

After the loop seems a right place

for (var i=0; i<lMarkerCount; i++) {
var oMarkerLocation = oLocations.gps[1].marker[i];
var lLat = oMarkerLocation.lat;
var lLng = oMarkerLocation.lng;

/* new Marker Position */
var lMarker = new google.maps.Marker({
    position: new google.maps.LatLng(lLat, lLng),
    animation: google.maps.Animation.DROP,
    map: lMap
  });


/* check custom Marker Image in GPS Data*/
var lGpsImg = oMarkerLocation.img;
var lParImg = lParameter.marker_icon;

if (lGpsImg && lGpsImg.length != 0) {
   var lMarkerImage = new google.maps.MarkerImage(lGpsImg);
} 
else {
   /* no custom image in GPS data but maybe in the parameters? */
   if (lParImg && lParImg.length != 0) {
      var lMarkerImage = new google.maps.MarkerImage(lParImg);
    } else {
      lMarkerImage = "";
    }
}
if (lMarkerImage && lMarkerImage.length != 0) {
   lMarker.setIcon(lMarkerImage);
}

google.maps.event.addListener(lMarker, 'click', (function(lMarker, i) {
    return function() {
      infowindow.setContent(oLocations.gps[1].marker[i].name);
      infowindow.open(lMap, lMarker);
    }
  })(lMarker, i));

}     

var myLatLng = {lat: -25.363, lng: 131.044};

var additionalmarker = new google.maps.Marker({
  position: myLatLng,
  map: lmap,
  title: 'Additional Marker!'
});  

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM