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.
·Image of the 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.");
}
});
}
});
You can do it with a custom overlay.google.maps.OverlayView
https://developers.google.com/maps/documentation/javascript/customoverlays
© 2024 OneMinuteCode. All rights reserved.