I want to embed html elements in google map.

Asked 2 years ago, Updated 2 years ago, 64 views

Currently, you can use Google map api to view maps and markers.

I would like to display a string (image of the information window) instead of a marker as a function I want to be realized.

·Implemented markers
normal marker

·Image of the marker you want to implement
Marker you want to implement

I would like to change the value displayed dynamically and display it.
In addition, the current implementation is not recognized as an HTML element in the implementation marker when viewed by Chrome's developer tool, but as an element in the marker you want to implement (I referred to Airbnb).

If anyone has the above knowledge, please let me know.

Below is the js of the current implementation.

$(function(){
  var hidden_keyword=gon.keyword;
  if(hidden_keyword.length){
    vargeocoder=new google.maps.Geocoder();
    geocoder.geocode({"address":hidden_keyword}, function(results, status){
      if(status==google.maps.GeocoderStatus.OK){
        varlat=results[0].geometry.location.lat().toFixed(6);
        varlng = results[0].geometry.location.lng().toFixed(6);
        varmapOpt = {
          center: new google.maps.LatLng(lat,lng),
          zoom:15,
          mapTypeId—Google.maps.MapTypeId.ROADMAP
        };
        varmap = new google.maps.Map( document.getElementById("map-canvas"), mapOpt);
        $(gon.latlng).each(function(i){
          var latlng = new google.maps.LatLng(gon.latlng[i].lat, gon.latlng[i].lng, false);
          varmarker_i = new google.maps.Marker({
          map —map,
          position:latlng
          });
        });
      } else {
        alert("The search was not possible because the name of the place was not entered.");
      }
    });
  }
});

javascript google-maps

2022-09-29 22:50

1 Answers

You can do it with a custom overlay.google.maps.OverlayView
https://developers.google.com/maps/documentation/javascript/customoverlays


2022-09-29 22:50

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.