Google Maps APi3: Polyline segments not appearing on map - php

Question

Goog day!
I have a very simple implementation of google maps, which allows my users to draw polylines anywhere on the map canvas.
When starting afresh, the polyline segments are visible on the map and the polyline is stored inside a mySql database using PHP.
// When editing a map with a polyline:
If a user decides to change the polyline, i load the previous polyline from the database and it is visible to the user. When they click on the button to draw a polyline it wil clear the previous polyline from the map and allow them to start afresh, however, once they start clicking away on the map, the new polyline segments is no visible on the map, but is saves correctly to the database.
Here is what i've done so far:
var map;
var polyline = null;
var polylinePath = null;
// HERE I INITIALIZE MY MAP ETC ETC ...
// IN EDIT MODE I ALLOW THE FOLLOWING FUNCTION TO BE CALLED FIRST TO LOAD ANY EXISITNG POLYLINES FOR THE USER
// THIS WORKS FINE, IT SHOWS THE PREVIOUS POLYLINE ON THE MAP.
function loadBasePolylines($mapGuid)
{
var loadUrl = 'classes/Ajax_System.php';
$.getJSON(loadUrl+"?action=loadMapPolylines&mapId="+mapGuid, function(json) {
if(json[0]['hasPolylines'] == 'yes'){
var polylinesArray = [];
var prepath = polylinePath;
if(prepath){
prepath.setMap(null);
}
var points = json[0].Points;
for (i=0; i<points.length; i++) {
polylinesArray.push(new google.maps.LatLng(points[i].lat,points[i].lon));
bounds.extend(new google.maps.LatLng(points[i].lat,points[i].lon));
}
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: 0.5,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
polylinePath = polyline.getPath();
polyline.setMap(map);
map.fitBounds(bounds);
}
});
}
// WHEN THE USER PRESS THE "DRAW PATH" BUTTON, THE FOLLOWING FUNCTION IN QUESTION IS CALLED:
function startPolyline()
{
if(polyline != null){
var answer = confirm("This will clear the current polyline from the map. Are you sure you want to continue?");
if(answer){
polyline.setMap(null);
if (tempMarkers) {
for (i in tempMarkers) {
tempMarkers[i].setMap(null);
}
tempMarkers.length = 0;
}
} else {
return;
}
}
var polyOptions = {
strokeColor: polylineColor,
strokeOpacity: polyLineOpacity,
strokeWeight: polyLineWidth,
clickable: false
}
polyline = new google.maps.Polyline(polyOptions);
polyline.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addPolylinePoint);
}
function addPolylinePoint(event)
{
var path = polyline.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
icon: '<?php echo URL; ?>public/mapIcons/mm_20_red.png',
map: map
});
tempMarkers.push(marker);
}
What i've tried so far:
Check the color codes are in correct format: YES
Check Lat Lon order and values: YES
Any help will sincerely be appreciated. Thank you in advance.

Answer 1

Wow, I've solved the disappearing polyline issue after reading through my question again. Hopefully this will help someone out there one day:
In my code where i load the polylines from the database:
function loadBasePolylines($mapGuid)
{
.
.
.
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: 0.5,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
}
I set the stroke opacity to 0.5 (Equal to 50%) right...
But then, just when i start the polyline tool in ...
function startPolyline()
var polyOptions = {
strokeColor: polylineColor,
strokeOpacity: polyLineOpacity,
strokeWeight: polyLineWidth,
clickable: false
}
... i set the opacity to an unset variable called polyLineOpacity.
Once i added the global variable and applied the loaded value in ...
function loadBasePolylines($mapGuid)
{
.
.
.
strokeOpacity = json[0]['lineOpacity'] * 100;
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: strokeOpacity,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
}
... the polylines with the correct opacity displayed correctly again!
I call this developers brain-freeze.
Tkx!

Answer 2

try reinitiating the map variable in the startPolyline function
map = new google.maps.Map(document.getElementById('id of your map')):