Hi, I want to have a Google Maps on a page and be able to draw two markers on this map and then use the coordinates for further logic. I have tried different widgets, but none seem to provide this functionality. So I want to use the Google Maps JavaScript API instead in combination with the HTMLSnippet. The only problem is that I can't get it to work. For starters, I want to just put a simple map with a marker on a page. I have a sample code (see below). I have a working API key that I have tested in another setting, so that isn't the problem. <!DOCTYPE html> <html> <head> <title>Add Map</title> <style type="text/css"> /* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ } </style> <script> // Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.036 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } </script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=MYOWNKEY&libraries=drawing&callback=initMap"> async ></script> </body> </html> The part that says MYOWNKEY is of course replaced by my actual API key. I have tried already to put <script src="https://maps.googleapis.com/maps/api/js?key=MYOWNKEY&libraries=drawing&callback=initMap"> async ></script> in the index.html with/without the async. Also I have tried to save it as a seperate file.html and load it in the HTMLSnippet. All I see on the page is the ‘My Google Maps Demo’ header. I have limitted knowledge of JS so far, so any help is greatly appreciated!
asked
Joël Boosman
1 answers
2
Hi Joel,
You contacted me, I will come back to it on this thread :). I would advice against using the HTML snippet for interaction with the Google Maps API. If you want something like this the best idea would be to use a widget which already handles a lot of the heavy lifting like async loading the Google Maps API and drawing manager which you need.
Two options:
Use my Google Maps Polygon widget and configure it to draw polylines. You can use the demo project for it. Draw a polyline with two points and finish the polyline. The widget will retrieve both sets of coordinates: ((x1,y1),(x2,y2)) and put it in a coordinatesString attribute. You can use that value to do further calculations
Extend my Google Maps Custom Marker . This is more complex and does need a fair understanding of JavaScript and building widgets. You need to make sure the widget doesn't disable drawing after first creating a marker and next to that you need to handle the following placing of markers on the map and catch the events exposing the coordinate sets (the event is called overlaycomplete or dragend)