Hi. I am trying to show multiple locations in one of the pages of wix. After little research, I found simple google maps is not an option for me. I am able to do that using the google maps api. I have embedded my code in a html tag of wix and it is working fine (Latitude and longitude information here are hard coded). Now I want to send latitude and longitude information from page code. I am trying to use window.postmessage method. It does not work. I am able to test window.postmessage in a separate html tag but it does not work in maps html tag. I am attaching the html tag code here. Please help.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body onload="init()">
<div id="map"></div>
<script>
//function initMap() {
// var uluru = {lat: -25.363, lng: 131.044};
//var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 4,
// center: uluru
// });
// var marker = new google.maps.Marker({
// position: uluru,
// map: map
//});
// }
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function init () {
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
console.log("HTML Code Element received a message!");
insertMessage(event.data);
}
}
}
function initMap() {
console.log("Entered");
window.onmessage = (event) => {
if (event.data) {
console.log(`HTML Component received a message: ${event.data}`);
// additional code here
}
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -33.9, lng: 151.2}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
// icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
</body>
</html>
the easiest (and nicest) way i've done it for my clients is using storepoint store locator app - i like it because its easier for clients to manage their locations on the go rather than code, which i used to do.. you can hide the sidebar if you just want the map part.
I have an "Area" field and for all the locations(lat+long) associated with a certain area, I want to display all the location points on a map. Any suggestions on how to do this?
Yes I do. I did not post it here for obvious reasons.
Hi,
Do you have APIKEY ?
Roi
Hi. Thanks for the reply. I did some workaround and achieved the multiple locations in google map. But I am not able to center the map with my current location.
Here is my code in html tag
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body onLoad = "init()">
<h3>My Google Maps</h3>
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=APIKEY"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
var markersData = [];
function init() {
console.log("entered");
window.onmessage = (event) => {
if (event.data) {
//console.log("entered");
//console.log((event.data.markersArr));
//console.log(event.data.markersArr[((event.data.markersArr).length)-1].latitudeDet);
markersData = event.data.markersArr;
var lati;
var long;
//console.log ("lat is "+lati);
//console.log("long is " + long);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
// center: {lat: parseFloat(lati), lng: parseFloat(long)}
center: new google.maps.LatLng(41.289913299999995,-96.0996978)
// center: {lat: 41.289913299999995, lng: -96.0996978}
});
markersData.forEach((geoCords)=> {
let i = new google.maps.Marker({
position: geoCords.position,
map: map
})})
}
}
window.parent.postMessage("Message for page code", "*");
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=init>
</script>
</body>
</html>
Hi,
Please review this thread regarding the same question.
Have a good day,
Tal.
I just want to send latitude and longitude information from my code to HTML tag.