Please find Add product Page frontend user with vm2geolocator custom field.
Please find below, the html code for add product page :
<tr>
<th colspan="2">Product Custom Fields</th>
</tr>
<tr class="geolocator" style="background-color:#f7f7f7;">
<td>
Product Location
<i class="vmv-icon-location " title="Point the product location"></i>
</td>
<td>
<div id="map_canvas" style="height: 300px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url("
maps.gstatic.com/mapfiles/openhand_8_8.cur
"), default;">
<div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
<div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto,Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 353px; top: 60px;">
<div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 168px; bottom: 0px; width: 122px;">
<div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint gm-style-cc" style="z-index: 1000001; -moz-user-select: none; height: 14px; line-height: 14px; position: absolute; right: 96px; bottom: 0px;" draggable="false">
<div style="width: 25px; height: 25px; overflow: hidden; display: none; margin: 10px 14px; position: absolute; top: 0px; right: 0px;">
<div class="gm-style-cc" draggable="false" style="-moz-user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;">
<div class="gmnoprint gm-bundled-control gm-bundled-control-on-bottom" style="margin: 10px; -moz-user-select: none; position: absolute; bottom: 107px; right: 28px;" draggable="false" controlwidth="28" controlheight="93">
<div class="gmnoprint" style="margin: 10px; z-index: 0; position: absolute; cursor: pointer; left: 0px; top: 0px;">
</div>
As you can see, I have got div id= "map_canvas" do you think I should get div id="map_canvas" instead div id ="map" for the frontend product page?